What You’ll Learn
What novalidate does and why it’s needed
How novalidate works in AngularJS forms
Differences between HTML5 validation and AngularJS validation
Practical examples of using novalidate
1️⃣ What is novalidate?
By default, modern browsers apply built-in HTML5 validation to forms (e.g., checking required, email, pattern, etc.). This can cause conflicts when using AngularJS validation because both HTML5 and AngularJS validation may run at the same time.
What does novalidate do?
Disables browser’s default validation
Allows AngularJS to fully control form validation
Ensures a consistent user experience
2️⃣ Why Disable HTML5 Validation?
Without novalidate, the browser may show default error messages before AngularJS validation kicks in.
AngularJS uses $invalid, $dirty, and $touched to track input validation, which won’t work properly if HTML5 validation is also active.
novalidate prevents inconsistent behavior across browsers.
3️⃣ Example: Using novalidate in an AngularJS Form
HTML Form Without novalidate (HTML5 Validation Active)
<div ng-app="myApp" ng-controller="FormController">
<form name="userForm" ng-submit="submitForm()">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required />
<button type="submit">Submit</button>
</form>
</div>
Problem:
- The browser will display default error messages instead of AngularJS validation messages.
HTML Form With novalidate (Only AngularJS Validation Active)
<div ng-app="myApp" ng-controller="FormController">
<form name="userForm" ng-submit="submitForm()" novalidate>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required />
<span class="error" ng-show="userForm.email.$touched && userForm.email.$invalid">
Please enter a valid email.
</span>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
4️⃣ How It Works
novalidate prevents the browser’s default validation messages from appearing.
AngularJS manages validation using $invalid, $touched, and $dirty.
The error message is displayed only if the user interacts with the field and enters an invalid value.
The submit button is disabled if the form is invalid.
5️⃣ Comparing HTML5 Validation vs. AngularJS Validation
| Feature | HTML5 Validation | AngularJS Validation |
|---|---|---|
| Error Messages | Browser-default tooltips | Custom messages with ng-show |
| Custom Styling | Limited control | Fully customizable |
| Tracking State | No $touched, $dirty | Uses $invalid, $dirty, $touched |
| Cross-Browser Behavior | Varies by browser | Consistent across browsers |
| Dynamic Control | Limited | Full control with AngularJS |
Conclusion: AngularJS validation is more flexible and customizable than default HTML5 validation.