How to make validation and as user change in values in AngularJS

Hello Everyone in this blog i am going to show you how to made validation on click on submit button working in AngularJs

We have three classes:-

1)css-form that is used to show that the validation is OK i.e green border of any textbox
2)css-form-error that is used to show that there is some error in text box i.e red border of text box
3)error class that is used to show error messages in red color

For example -:

Here we have a form i.e signUpForm
we apply non-validate so that html5 default validation not shown here and css-form class i.e we apply ok class to every field of this form.

And see we apply css-form-error class for setting border red dynamically by using ng-class conditionally 
 we apply error class if 
1)First-name is invalid and First-name is not pristine (means you touched the field by clicking or entering something or removing in text filed)
OR
2)First-name is invalid and form is submitted 
OR
3)First-name is required and form is submitted

we also taking a span to showing error messages and showing them conditionally using ng-show:-
1)First-name is required and first name is not pristine
OR
2)First-name is required and form is submitted

So in this way we easily show error message and border as red and green according to our conditions

We also passing signUpForm.$valid that is return boolean true or false wheather form is valid or not so in controller side:-

$scope.signup = function(formValid){
if(formValid){
//do your work here
//
}
}
 

NOTE: There is a keyword i.e $submitted in Angular that return True if user has submitted the form . So as user press submit button submitted is true and our classes are applied for that and error messages are shown.
Also note that for validation in angular to work always check that you defined the name of field and for submitted true always check that button type is submit.

Here is css we are using above work for textbox,textarea, select:-

.css-form-error input.ng-invalid, .css-form-error select.ng-invalid, .css-form-error textarea.ng-invalid{
	border: 1px solid #f00 !important;

}
.css-form input.ng-valid,.css-form-error select.ng-valid{
	border: 1px solid #95C861 !important;

}
.selectBox.css-form-error{border: 1px solid #f00 !important;
}
.selectBox.css-form-error select{border: 0px !important;
}
.selectBox select{
    padding: 15px 0;
}
.error {
    color: #f00;
    font-weight: 500;
    font-size: 13px;
}
 

So in this way you can validate the form with submit button and applying class at run time using ng-class.

Thanks hope this will help
Queries are welcome.