AngularJS Validation

📌 AngularJS Validation क्या है?

AngularJS अपने built-in directives और Form states की मदद से यह check करता है कि user का input सही है या नहीं।

आसान भाषा में: AngularJS खुद समझता है कि user ने जो डाला वो valid है या invalid, और उसी अनुसार real-time में feedback देता है।

---

🎯 AngularJS Validation के Features:

• ✅ Real-time input checking
• ✅ Error message show/hide
• ✅ Form submit control (ng-disabled)
• ✅ Input status के लिए CSS classes (ng-valid, ng-invalid, etc.)

---

🧩 AngularJS Validation कैसे काम करता है?

Key Concepts:

Concept	Description
ng-model	Input को किसी variable से bind करता है
required	Field को भरना ज़रूरी बनाता है
type="email" / "number"	Field में type-specific validation
ng-pattern	Custom regex pattern लगाने के लिए
formName.inputName.$valid	Field की वैलिडिटी चेक करने के लिए
CSS classes	Auto-added: ng-valid, ng-invalid, ng-touched, etc.

---

✅ Example: Required Field Validation

<form name="myForm" novalidate>
  Name: 
  <input type="text" name="username" ng-model="user.name" required>
  
  <span ng-show="myForm.username.$touched && myForm.username.$invalid">
    Name is required.
  </span>
</form>

जैसे ही user input से बाहर निकलेगा (blur), error message show होगा अगर वो खाली है।

---

✅ Example: Email Validation

<form name="emailForm" novalidate>
  Email:
  <input type="email" name="userEmail" ng-model="user.email" required>

  <span ng-show="emailForm.userEmail.$error.required && emailForm.userEmail.$touched">
    Email is required.
  </span>

  <span ng-show="emailForm.userEmail.$error.email && emailForm.userEmail.$touched">
    Invalid email address.
  </span>
</form>

AngularJS खुद check करता है कि input में valid email है या नहीं।

---

✅ Example: Pattern Validation (Custom Regex)

<input type="text" name="username" ng-model="user.name"  
       ng-pattern="/^[A-Za-z]{3,10}$/" required>

<span ng-show="myForm.username.$error.pattern && myForm.username.$touched">
  Name must be 3–10 letters (A–Z only).
</span>

Custom regex से आप complex validation rules बना सकते हैं।

---

✅ Example: Disabling Submit Button

<button ng-disabled="myForm.$invalid">Submit</button>

जब तक form valid ना हो, submit button disable रहेगा।

---

✅ AngularJS Auto-Adds These CSS Classes:

Class	कब लगती है?
ng-valid	Field valid है
ng-invalid	Field invalid है
ng-pristine	Field untouched है
ng-dirty	User ने field को change किया है
ng-touched	User ने field को blur किया है

👉 इन classes को आप custom CSS से style कर सकते हैं।

---

✅ Bonus: Live Validation Styling

input.ng-invalid.ng-touched {
  border: 2px solid red;
}
input.ng-valid.ng-touched {
  border: 2px solid green;
}

Input बॉर्डर अपने आप लाल या हरा हो जाएगा validation के अनुसार।

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में form validation कैसे काम करता है?
2. ng-pattern का क्या उपयोग है?
3. नीचे दिए गए code का क्या मतलब है?

<span ng-show="form.email.$error.email">Invalid email</span>

---

✅ आपने क्या सीखा?

• AngularJS Validation के built-in tools
• Required, email, pattern और custom validation
• CSS classes और visual feedback
• Submit button disable करना
• Error messages conditionally show करना

---

🎯 अब आप AngularJS में powerful और user-friendly form validations बना सकते हैं — जो real-time में यूज़र को guide करें!