Friday, January 8, 2016

AngularJS - Custom form validation

We can have some situation to use custom validations to our input fields, we can use following code to implement it.

Here my case is, I want to validate multiple emails field and have to show field error using AngularJS Form Validation.

For multiple email JavaScript validation check here http://rbalajiprasad.blogspot.in/2015/04/javascript-validate-multiple-email.html 

For AngularJS Form validation check here http://www.w3schools.com/angular/angular_validation.asp


HTML Page:

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  
<span ng-show="myForm.email.$error.required">Email is required.</span>
  
<span ng-show="myForm.email.$error.validEmail">Invalid email address.</span>
  
</span>
</p>
<p>
  
<input type="button" ng-click="submit()"
  ng-disabled=
"myForm.email.$dirty && myForm.email.$invalid">
</p>


AngularJS Controller

$scope.Submit = function () {
     //your validation
            var isValidEmail = isValidEmailAddress($scope.email.ToAddress);
            $scope.myForm.email.$setValidity("validEmail", isValidEmail);

            var isValid = $scope.myForm.$valid;
            if (!isValid) { return; }

//your logic goes here

        };