Angular Validation to show all errors on submit

Question

I have a simple example form that will validate a name to be required and 3 letters at least. Nicely display errors as you make the field dirty:

[http://plnkr.co/edit/FEclhN?p=preview]

Our designer wants , however, all the fields that are empty and that are "required" to go "red" as well, when the user presses the Submit button. Right now, unless they have touched and made the field "dirty" the validation doesn't turn the field red.

Of course the field should not be red to start with, only after they Submit the form or they make a field dirty.

jQueryValidate.org does this, so that's what they want in Angular too.

Why don't you use "ng-disabled=formName.$invalid" on the submit button? That way, the form is not submittable until you have filled all the requirements — Kousha
– Kousha, Commented Jun 11, 2014 at 3:56

Brocco · Accepted Answer · 2014-06-11 04:01:14Z

I ran into this same requirement and solved it by adding a boolean onto my controller's scope to indicate if the form had been submitted formSubmitted

And inside my form submit method I would set the value of formSubmitted to true

Then I would dynamically add a class where I needed:

<div ng-class="{'required-error': formSubmitted && formName.field.$error.required}"> <input name="field" required/> </div>

[plnkr.co/edit/FEclhN?p=preview] now uses this design to make it work. Hope it helps others.

Mehul Rajput · Accepted Answer · 2014-06-11 06:42:20Z

You can also use this https://github.com/AngularAgility/AngularAgility For all controls and error summary in toster. Its best way to validate and focus on field which causes validation.

Collectives™ on Stack Overflow

Angular Validation to show all errors on submit

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related