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
