AngularJS Form Validation

Code

Form validation is an important part of web development. The user experience of your online forms will leave an impression on your visitors so it is important that you build great forms on your website. We will apply AngularJS to an existing online form.

Initial Form

Use the following HTML which uses Bootstrap CSS for formatting as a starting point. After you work through this example you can apply the changes to an existing form.

<div class="form-container">
<form name="myform" action="" method="post">
 
 <div class="form-group">
 <label for="firstname">First Name &#42;</label>
 <input type="text" name="firstname" placeholder="First Name">
 </div><!-- .form-group -->
 
 <div class="form-group">
 <label for="lastname">Last Name &#42;</label>
 <input type="text" name="lastname" placeholder="Last Name">
 </div><!-- .form-group -->
 
 <div class="form-group">
 <label for="email">Email Address &#42;</label>
 <input type="text" name="email" placeholder="Email Address">
 </div><!-- .form-group -->
 
 <button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- #form-container -->

Add AngularJS to your page.

Add AngularJS to the bottom of your page. I also added in the Bootstrap CDN for CSS styling. The ng-app directive tells AngularJS that this is the root element of the AngularJS application. We will apply this to the div outside our form. The “form-container” class is optional we are using it for our demo. You will want to apply ng-app to a div outside your existing form.

<div class="form-container" ng-app>
<form ...>
  ...
</form>
</div><!-- #form-container -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Add form validation.

Apply the following angular directives for form validation.

The ng-required directive indicates that a field is required. If a required field has no value the form will automatically have an ng-invalid class applied until the requirements are met.

  <div class="form-group">
    <label for="firstname">First Name &#42;</label>
    <input type="text" name="firstname" placeholder="First Name"
      ng-required="true">
  </div><!-- .form-group -->

Test form values

The ng-model directive binds an input, select, textarea (or custom form control) value to angular. Use the same field name and append user.fieldname to the front to bind it to the {{user}} data object which we will use to view our form values.

  <div class="form-group">
    <label for="firstname">First Name &#42;</label>
    <input type="text" name="firstname" placeholder="First Name"
      ng-model="user.firstname"
      ng-required="true">
  </div><!-- .form-group -->

For testing we add an alert div to output our {{user}} data which will display our ng-model form values. Angular uses the double curly brackets to display data. Add this above the submit button.

 <p class="alert alert-warning">Output: {{user}}</p>

Validate the email address

The ng-pattern directive is used on the email field for regular expression matching to validate the email address.

  <div class="form-group">
    <label for="email">Email Address &#42;</label>
    <input type="text" name="email" placeholder="Email Address"
      ng-model="user.email"
      ng-required="true"
      ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/">
  </div><!-- .form-group -->

Disable the submit button until the form passes validation

The ng-disabled directive is applied to our submit button and will remain disabled until all the form validation passes.

  <button type="submit" class="btn btn-default" ng-disabled="myform.$invalid">Submit</button>

Final touches

We are adding additional user prompts to let the user know there is missing field data.

• The ng-show directive will display this element until the requirements indicated in the property are met.
• The field was marked as required in the previous step by ng-required=”true” property. The myform.firstname.$invalid condition will return true until there is a value added into the field.
• We also added a $touched condition which means the field has been activated. This will not return true until the cursor has entered the field.

 <div class="form-group">
 <label for="firstname">First Name &#42;</label>
 <input type="text" name="firstname" placeholder="First Name"
 ng-model="user.firstname"
 ng-required="true">
 <div ng-show="myform.firstname.$invalid && myform.firstname.$touched"
 class="alert alert-warning">You must fill out your first name.</div>
 </div><!-- .form-group -->

Completed Form

Here is the code for the completed form.

<div class="form-container" ng-app>
<form name="myform" action="" method="post">
 
 <div class="form-group">
 <label for="firstname">First Name &#42;</label>
 <input type="text" name="firstname" placeholder="First Name"
 ng-model="user.firstname"
 ng-required="true">
 <div ng-show="myform.firstname.$invalid && myform.firstname.$touched"
 class="alert alert-warning">You must fill out your first name.</div>
 </div><!-- .form-group -->
 
 <div class="form-group">
 <label for="lastname">Last Name &#42;</label>
 <input type="text" name="lastname" placeholder="Last Name"
 ng-model="user.lastname"
 ng-required="true">
 <div ng-show="myform.lastname.$invalid && myform.lastname.$touched" 
 class="alert alert-warning">You must fill out your last name.</div>
 </div><!-- .form-group -->
 
 <div class="form-group">
 <label for="email">Email Address &#42;</label>
 <input type="text" name="email" placeholder="Email Address"
 ng-model="user.email"
 ng-required="true"
 ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/">
 <div ng-show="myform.email.$invalid && myform.email.$touched" 
 class="alert alert-warning">This must be a valid email.</div>
 </div><!-- .form-group -->
 
 <!-- Display Form Values for Testing !!!Delete after testing!!! -->
 <p class="alert alert-warning">Output: {{user}}</p>
 
 <button type="submit" class="btn btn-default" ng-disabled="myform.$invalid">Submit</button>
</form>
</div><!-- #form-container -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>