CODEWITHSUNDEEP
javascriptangularjsformsvalidation
Fizzix
Fizzix

Reputation: 24375

How to setup Angular validation to work on blur and form submit?

Angular validation currently works by updating on model change. Although displaying these validation errors upon keyup is not very UI friendly.

An ideal solution would be to display the error messages on blur, along with on form submit. Once an input is blurred on the first time and an error message is displayed, the input would then need to be updated on keyup/model change.

I have seen the following which allows the model to be updated upon blur, but this is not an ideal solution since the model is only updated on blur for every situation.

<input type="text" name="user" ng-model="user" ng-model-options="{ updateOn: 'blur' }" required>

I also came across the following solution that works well on blur and then changes to keyup after an error exists. Although the validation does not apply on form submit.

http://plnkr.co/edit/VSPOYO16ozq2bKaLl3n9?p=preview

Upvotes: 0

Views: 630

Answers (2)

tuckerjt07
tuckerjt07

Reputation: 922

Create a directive that is bound to the blur event, you seem to have found one that will work but I can't read the Plunkr on my phone, and use this to set validity.

Now inside your submit function in the controller you need to check the form for errors. 

if (Object.keys($scope.formName.$error).length > 0) { 
    return false;
}

is an easy way to do this and will also still have the form set to $submitted.

Upvotes: 0

Satyam Koyani
Satyam Koyani

Reputation: 4274

Here for this you can have one angular scope variable which maintain the state of form submit is submitted or not by default that variable is false. 

$scope.submitted = false;

and one scope function which validate the fields on form submit. Keep in mind place name attribute of form element is must be stetted and refereed same in function. Function approach is to make it generic. You can directly write into html template also by accessing $dirty and $error variable of that input elements.

$scope.validateInput = function (name, type) {
  var input = $scope.demoform[name];
          return (input.$dirty || $scope.submitted) && input.$error[type];
};

This is function which will be called on form submission.

$scope.submitForm = function () {
            $scope.submitted = true;
            if ($scope.demoform.$valid) {
                console.log('Submitted!!');
            } else {
                console.log('Not valid!!');
                return false;
            }
        };

Now on html template you can write this way .

<form name="demoform" ng-submit="submitForm()" novalidate="">
    <input type="text" name="name" required="" ng-model="name"/>
    <span ng-show="validateInput('name', 'required')" class="text-danger">Name is required</span>
    <button type="submit" class="btn btn-info" >Save</button>
</form>

Now on form submit You can see the validation message is there if field is not valid.

Demo Plunkr of form validation on form submit in angular

Upvotes: 1

Related Questions