AngularJS Validation: Building Trustworthy Forms - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Makes Their Forms Foolproof

Scene: From Forms to Real Validation

The client sends a final form feature request:

“Please make sure users can’t submit unless all fields are correct. Show helpful messages if anything is wrong!”

Mike (Team Lead): “Good validation prevents mistakes and builds user trust. AngularJS can validate everything right in the view!”

Sara (Junior Dev): “With AngularJS, we get live feedback, custom messages, and full control—no more submitting bad forms!”

1. AngularJS Built-In Validation Features

  • Form controls like input and select automatically track state and validity if you use ng-model.
  • Validation directives: required, ng-minlength, ng-maxlength, ng-pattern, type="email", and more.

AngularJS form fields track:

  • $valid / $invalid: Is the field valid?
  • $touched / $untouched: Has it been focused and left?
  • $dirty / $pristine: Has its value changed?

2. Required Field Example

<form name="regForm">
  <input name="username" ng-model="user.username" required>
  <span ng-show="regForm.username.$touched && regForm.username.$invalid">
    Username is required!
  </span>
  <button ng-disabled="regForm.$invalid">Submit</button>
</form>
  • If the user touches and leaves the field empty, a message appears.
  • The submit button is only enabled if the form is valid.

3. Min/Max Length and Pattern Validation

Password must be at least 6 characters:

<input name="password" ng-model="user.password" ng-minlength="6" required>
<span ng-show="regForm.password.$touched && regForm.password.$error.minlength">
  Password must be at least 6 characters!
</span>

Custom pattern (letters only):

<input name="nickname" ng-model="user.nickname" ng-pattern="/^[a-zA-Z]+$/" required>
<span ng-show="regForm.nickname.$touched && regForm.nickname.$error.pattern">
  Only letters allowed!
</span>

4. Email Validation

AngularJS validates emails out of the box:

<input type="email" name="email" ng-model="user.email" required>
<span ng-show="regForm.email.$touched && regForm.email.$invalid">
  Please enter a valid email!
</span>

5. Complete Example: Form with Validation

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <style>
    input.ng-invalid.ng-touched { border: 1px solid red; }
    input.ng-valid.ng-touched { border: 1px solid green; }
  </style>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
  <form name="regForm">
    <p>
      Username:
      <input name="username" ng-model="user.username" required>
      <span ng-show="regForm.username.$touched && regForm.username.$invalid">
        Username is required!
      </span>
    </p>
    <p>
      Email:
      <input type="email" name="email" ng-model="user.email" required>
      <span ng-show="regForm.email.$touched && regForm.email.$invalid">
        Please enter a valid email!
      </span>
    </p>
    <p>
      Password:
      <input type="password" name="password" ng-model="user.password" ng-minlength="6" required>
      <span ng-show="regForm.password.$touched && regForm.password.$error.minlength">
        Must be at least 6 characters!
      </span>
    </p>
    <button ng-disabled="regForm.$invalid">Submit</button>
  </form>
  <h4>Live Preview:</h4>
  <p>Username: {{ user.username }}</p>
  <p>Email: {{ user.email }}</p>
</div>
<script>
angular.module('formApp', []).controller('formCtrl', function($scope) {
  $scope.user = {};
});
</script>
</body>
</html>

6. Styling Validation with AngularJS Classes

  • AngularJS adds classes to fields:

    • .ng-invalid, .ng-valid
    • .ng-touched, .ng-untouched
    • .ng-dirty, .ng-pristine

  • Use these in CSS to highlight fields as users interact!

7. Team Discussion: Why Use AngularJS Validation?

  • Sara: “Users see right away if something’s missing or wrong.”
  • Lina (Designer): “The form looks and feels modern. Validation is part of the user experience!”
  • Mike: “It’s less work for us, fewer bugs, and happier users.”

Quick Team Challenge: Confirm Password Validation

Add a “Confirm Password” field that only lets you submit if it matches the first password. Hint: Compare user.password and user.confirm in a custom validation message.

Key Takeaways

  • AngularJS gives you live validation, user feedback, and robust form states—with almost no extra code.
  • Use built-in directives and properties for instant, reliable validation.
  • Smart, user-friendly forms are the key to a trustworthy app!

Team Conclusion

Lina: “Our forms help users every step of the way. Ready for even more—maybe routing or submitting data next?”

Try these examples in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_validation).

⚠️ **GitHub.com Fallback** ⚠️