Show red border for invalid input fields on form submit angularjs

In this article we are going to see how to show red color border for all invalid input elements after submitting form (using AngularJs)

Whenever we are providing a form to user to submit some data like his contact details or purchase details etc we have to make sure that some of the fields are filled for sure before submitting. Or if the form contains special fields like Email or Website url we have to make sure that user is submitting these values in correct format.

We can make a field as required field by adding html 5 Required attribute to that input field. And for Email field give type as type="email"  and for url field give the type as or type="url"

Let's create a simple form where user have to submit his contact details

<form name="addContact">

  <label>First Name</label>
  <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

  <label>Last Name</label>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/>

  <label>Email</label>
  <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/>

  <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />  
  </form>

In the above form we have 3 fields First Name, Last Name and Email. I added html 5 required attribute to all fields so that user must enter value in all the three fields before submitting. I also added type="email" to Email field so that it will make sure that user submitting Email address in correct format.

Now, if user submits form without entering values in any of these fields, we have to show error message saying that these fields are required and must be filled before submitting.

For that, let's add span tags just below the input fields which contains respective error message.

Modify the above html as

<form name="addContact">

  <label>First Name</label>
  <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>
  <span class="text-error" data-ng-show="addContact.submitted && addContact.FirstName.$error.required">first Name is required</span>
  <label>Last Name</label>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/>
  <span class="text-error" data-ng-show="addContact.submitted && addContact.LastName.$error.required">Last Name is required</span>
  <label>Email</label>
  <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/>
  <span class="text-error" data-ng-show="addContact.submitted && addContact.Email.$error.required">Email address is required</span>  <span class="text-error" data-ng-show="addContact.submitted && addContact.Email.$error.email">Email address is not valid</span>
  <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />  
  </form>

Now in your Angular Controller add the following code

$scope.save= function (model) {
    if ($scope.addContact.$valid) {      
      //form is valid
    }
    else {
        //if form is not valid set $scope.addContact.submitted to true     
        $scope.addContact.submitted=true;    
    }};
});

In Save function we are checking whether the form is valid or not using $scope.addContact.$valid. If all fields are filled, then the form will get submitted and if all the fields are not filled then error message will be shown under the fields. (to show the error messages in red color i added class 'text-error' to all span tags. so in css add color:red to using class)

If you check the span elements we added data-ng-show="addContact.submitted && addContact.FirstName.$error.required". This is because these span elements must be shown only after submitting form. we are making addContact.submitted to true within the save function. And addContact.FirstName.$error.required will be true if the value is null. So as both values are true the span elements will be shown.

If you observe the above html code you can see two span tags for Email field. One is to check whether the Email field is empty and other is to check whether the value entered in Email field is in correct format or not.

 In this way, we can show error message for invalid fields after submitting form.

What if you want to show red border for all invalid fields on form submit using AngularJs ?

This can be achieved by adding a class to all input fields after submitting form. This can be done using ng-class attribute(which adds/removes a class based on a condition)

For example change the First Name field to

<input type="text" ng-class="{submitted:addContact.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

In the above html code i added ng-class attribute to First Name field. So, class named "submitted" gets applied to that field when addContact.sumbitted value is true. As we are making this property true after submitting the form (see save function code above) the class gets applied to First Name field after submitting form.

So, now if the form get submitted without entering any value in required fields then "submitted" class will be applied to those elements. So, now we can show red border for all those elements using the following css

input.submitted.ng-invalid
{
  border:1px solid #f00;
}

above css changes the border color of all invalid fields after submitting form. If you observe the above css it has two classes 'submitted' and 'ng-invalid' where we are manually adding class 'submitted' to input elements and one more class 'ng-invalid' is automatically added by AngularJs if the field is invalid.

We can also have a class at form level. i.e., we can add ng-class attribute to form instead of adding to each element in form.

Exapmle:

<form name="addRelation" ng-class="{submitted:addContact.submitted}">

Above statement adds the class('submitted') to form. So, now you can use following css to show red color border to all invalid input fields

form.submitted .ng-invalid
{
    border:1px solid #f00;
}

In this way we can show red color border on input fields after submitting form using Angular JS.

For more posts on AngularJs visit : AngularJs