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"
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>
$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;
}};
});
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/>
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}">
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
A nice article for simple form validation/showing errors.
ReplyDelete