AngularJS Form Validations

AngularJS form validations tutorial focus on applying validations on form elements before submitting it. We used below JS files and versions

JS Files and Versions:

  • angular.min.js – 1.6.2
  • bootstrap.css
  • angular-routing.js
  • bootstrap.js
  • jQuery.js

Form Modal CSS classes:

ngModel adds the below class for each input element:

  • ng-valid: the model is valid
  • ng-invalid: the model is invalid
  • ng-pristine: the control hasn’t been interacted with yet
  • ng-dirty: the control has been interacted with
  • ng-touched: the control has been blurred
  • ng-untouched: the control hasn’t been blurred
  • ng-valid-[key]: for each valid key added by $setValidity
  • ng-pending: any $asyncValidators are unfulfilled

In this tutorial, we will

AngularJS Form Validations Examples

  • Lets create project of with below structure:AngularJS Form validations
  • createEmployee.html
    • novalidate will suppress native browser validations
    • ng-submit=”submitEmployee(empForm)” will call the method defined in MailController
    • We will check the validation on form.submitted or  input field is touched
    • we display error message if it is empty: empForm.firstName.$error.required
    • <div class="container-fluid">
       <style type="text/css">
          .error-mesg{  color:#f38888;  }
       </style>
      <div class="employee-create">
       <h2 style="color:#f38888;text-align:center">Add Employee</h2>
       <form name="empForm" novalidate ng-submit="submitEmployee(empForm)">
       <div class="row">
            <div class="col-md-6">
                 <div class="row">
                   <div class ="col-sm-offset-1 col-xs-6">
                      <div class="form-group">
                       <label class="control-label" style="color: #0515B5">First Name: <span style="color:red;">*</span></label>
                        <input type="text" class="form-control" name="firstName" ng-model="employee.firstName" required placeholder="First Name" />
                        <div ng-show="empForm.$submitted || empForm.firstName.$touched">
                           <p class="error-mesg" ng-show="empForm.firstName.$error.required">First Name is required</p>
                        </div>
                    </div>
                  </div>
               </div>
          <div class="row">
             <div class = "col-sm-offset-1 col-xs-6">
                 <div class="form-group" >
                   <label class="control-label" style="color: #0515B5">Last Name: <span style="color:red;">*</span></label>
                   <input type="text" class="form-control" name="lastName" ng-model="employee.lastName" required placeholder="Last Name" />
                    <div ng-show="empForm.$submitted || empForm.lastName.$touched">
                      <p class="error-mesg" ng-show="empForm.lastName.$error.required">The Last Name is required</p>
                    </div>
               </div>
            </div>
          </div>
         <div class="row">
             <div class = "col-sm-offset-1 col-xs-6">
                <div class="form-group" >
                     <label class="control-label" style="color: #0515B5">Employee ID: <span style="color:red;">*</span></label>
                     <input type="text" class="form-control" name="empId" ng-model="employee.empId" required placeholder="Enter EmpId" />
                     <div ng-show="empForm.$submitted || empForm.empId.$touched">
                         <p class="error-mesg" ng-show="empForm.empId.$error.required">EmployeeId is required</p>
                     </div>
                </div>
            </div>
          </div>
         <div class="row">
            <div class = "col-sm-offset-1 col-xs-6">
                <div class="form-group" >
                    <label class="control-label" style="color: #0515B5">Email: <span style="color:red;">*</span></label>
                    <input type="text" class="form-control" name="email" ng-model="employee.email" required placeholder="Email" />
                    <div ng-show="empForm.$submitted || empForm.email.$touched">
                       <p class="error-mesg" ng-show="empForm.email.$error.required">Email is required</p>
                    </div>
               </div>
            </div>
         </div>
        </div>
        <div class="col-md-6">
           <div class="row">
             <div class = "col-sm-offset-1 col-xs-6">
               <div class="form-group" >
                 <label class="control-label" style="color: #0515B5">Designation: <span style="color:red;">*</span></label>
                 <input type="text" class="form-control" name="designation" ng-model="employee.designation" required placeholder="designation" />
                 <div ng-show="empForm.$submitted || empForm.designation.$touched">
                  <p class="error-mesg" ng-show="empForm.designation.$error.required">Designation is required</p>
                  </div> 
              </div>
          </div>
         </div>
           <div class="row">
             <div class = "col-sm-offset-1 col-xs-6">
               <div class="form-group">
                  <label class="control-label" style="color: #0515B5">Project Allocation: <span style="color:red;">*</span></label>
                   <select name="project" ng-model="employee.project" required="true">
                       <option>Project1</option>
                       <option>Project2</option>
                       <option>Project3</option>
                    </select>
                <div ng-show="empForm.$submitted || empForm.project.$touched">
                    <p class="error-mesg" ng-show="empForm.project.$error.required">Program is Required</p>
               </div>
             </div>
            </div>
          </div>
        </div>
       </div>
       <div class="createSubmit" style="text-align:center" >
             <input type="submit" value="Submit" class="btn btn-primary" /> 
       </div>
       <div style="clear:both;"></div>
        </form>
       </div>
      <br/>
      </div>
  • app.js is:AngularJs Form validations

Download AngularJS Code

 

1 Comment

  1. mukesh

    Thanks a lot…
    I have searched many sites for examples you are the only one to have a clear one..
    Please give more examples..thanks again!!

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *