UI & Validation Playbook

Interactive reference para sa mga QA Testers. I-compare ang actual system behavior sa mga standards na nandito para malaman kung ano ang irereport na bug sa mga programmers.

Strict Input Behaviors

Live Type

Behavior: Dapat hindi nagta-type ang letters. Kung susubukan mag-type ng letter, mag-eerror.

Alert & Toast Standards

Clickable

Strict Rule: Bawal ang default browser alert(). Dapat SweetAlert2 para sa modals, at React Hot Toast para sa quick notifications.

General Regex Validator

Interactive QA

Standard Email Regex Reference

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

Placeholder & Label Standards

UX Guideline

Rule para sa QA: Ang placeholder ay example data lang (e.g., Juan Dela Cruz). Hindi ito dapat ginagamit bilang pamalit sa Label.

Mali (Reject)

Walang Label, Placeholder lang

Pag nag-type ka, mawawala yung "Full Name". Makakalimutan ng user kung para saan 'to.

Tama (Standard)

May Label + Example Data

May Label sa taas. Ang placeholder ay example lang ng format kung paano mag-type.

Form Submission & Error States

State Management

Strict Rule: Kapag nag-submit ang user at may error, BAWAL I-CLEAR ANG BUONG FORM. I-retain ang tamang data at i-highlight lang kung alin ang maling field.

Mali (Reject)

Full Form Reset (Bad UX)

Subukan mong lagyan ng Name, pero maliin mo ang Email. Pag-submit, mabubura lahat.

Tama (Standard)

Retain Data & Specific Errors

Kung tama ang Name pero mali ang Email, maiiwan ang Name at sa Email lang mag-eerror.

VB.NET / Desktop UX Standards

Keyboard Navigation

VB.NET / Desktop Rule: Sa desktop apps (data entry), bawal ang laging naka-asa sa mouse. Dapat ayos ang TabIndex (susunod ang cursor pag pinindot ang 'Tab') at dapat nagti-trigger ang Submit kapag pinindot ang 'Enter' key sa loob ng textbox.

Mali (Reject)

Sabog ang TabIndex & Walang Enter

Click mo yung Item 1, tapos pindutin mo yung "Tab" sa keyboard mo. Tingnan mo kung saan tatalon. Tapos try mo mag-Enter.

Tama (Standard)

Logical TabIndex & Enter to Submit

Click mo yung Item 1, pindutin ang "Tab" (sunod-sunod pababa). Pag nasa huling input ka na, pindutin ang "Enter".