Form Validation in AngularJS (ng-valid, ng-invalid)

Form validation is an essential part of any web application to ensure data integrity and user input correctness. In AngularJS, form validation is handled using built-in directives and CSS classes like ng-valid, ng-invalid, ng-touched, and ng-dirty. These help in tracking the state of form inputs dynamically.

Topics Covered:

1. Understanding Form Validation in AngularJS
2. Basic Syntax of AngularJS Forms
3. ng-valid and ng-invalid Overview
4. Required Field Validation (ng-required)
5. Email Validation (ng-pattern)
6. Minimum and Maximum Length Validation (ng-minlength, ng-maxlength)
7. Real-Time Form Validation Example
8. Using CSS for Visual Feedback
9. Handling Form Submission with Validation
10. Best Practices

---

1. Understanding Form Validation in AngularJS

AngularJS provides real-time form validation by adding classes (ng-valid, ng-invalid) based on the input’s state. These classes allow developers to style forms dynamically and prevent invalid submissions.

---

2. Basic Syntax of AngularJS Forms

To create a form in AngularJS, you need to use the ng-model directive to bind inputs to the scope.

<form name="userForm">
    <input type="text" name="username" ng-model="username" required>
</form>

• AngularJS automatically tracks the validity of username.
• If the field is empty, it becomes invalid (ng-invalid).
• If it has valid input, it becomes valid (ng-valid).

---

3. ng-valid and ng-invalid Overview

Class Name	Meaning
ng-valid	The input is valid (all validations pass).
ng-invalid	The input is invalid (violates at least one validation rule).
ng-pristine	The input has not been touched/changed.
ng-dirty	The input has been modified.
ng-touched	The user has interacted with the input.
ng-untouched	The user has not interacted with the input.

---

4. Required Field Validation (ng-required)

<form name="userForm">
    <input type="text" name="username" ng-model="username" ng-required="true">
    <span ng-show="userForm.username.$error.required">Username is required!</span>
</form>

• If the input is empty, the error message is shown.

---

5. Email Validation (ng-pattern)

<form name="emailForm">
    <input type="email" name="email" ng-model="email" required>
    <span ng-show="emailForm.email.$error.email">Invalid email format!</span>
</form>

• The input must follow email format, or it will be invalid.

---

6. Minimum and Maximum Length Validation (ng-minlength, ng-maxlength)

<form name="passwordForm">
    <input type="password" name="password" ng-model="password" ng-minlength="6" ng-maxlength="12" required>
    <span ng-show="passwordForm.password.$error.minlength">Password must be at least 6 characters!</span>
    <span ng-show="passwordForm.password.$error.maxlength">Password cannot exceed 12 characters!</span>
</form>

• The password must be between 6 and 12 characters.

---

7. Real-Time Form Validation Example

<form name="userForm" novalidate>
    <label>Username:</label>
    <input type="text" name="username" ng-model="username" required>
    <span ng-show="userForm.username.$error.required">Username is required!</span>

    <label>Email:</label>
    <input type="email" name="email" ng-model="email" required>
    <span ng-show="userForm.email.$error.email">Invalid email format!</span>

    <label>Password:</label>
    <input type="password" name="password" ng-model="password" ng-minlength="6" required>
    <span ng-show="userForm.password.$error.minlength">Password must be at least 6 characters!</span>

    <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>

• The submit button is disabled until all fields are valid.

---

8. Using CSS for Visual Feedback

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

• Invalid inputs have a red border.
• Valid inputs have a green border.

---

9. Handling Form Submission with Validation

<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    <input type="text" name="username" ng-model="username" required>
    <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>

$scope.submitForm = function(isValid) {
    if (isValid) {
        alert("Form submitted successfully!");
    }
};

• The form only submits if it is valid.