7

Doing form validation with angularjs I want to mark all required fields as erroneous when the user click submit.

I am using input.ng-dirty.ng-invalid to style the controls with error. So what I want is to set ng-dirty on required controls (or all controls.. it will be the same for me) when the user submits the form.

Validation is working. I understand why, what I am trying could be wrong, but I found no other way to do the same effect, except something that I think is too complicated to be right.

What I tried was:

<div ng-app>
    <form novalidate>
        <input name="formvalue" type="text" ng-model="formvalue" required />
        <input type="submit" />
    </form>
</div>

http://jsfiddle.net/yq4NG/

Fernando
  • 2,131
  • 3
  • 27
  • 46

1 Answers1

8

Let's start by adding angular to your jsfiddle by wrapping it in 

<div ng-app>...</div>

http://jsfiddle.net/yq4NG/1/

By default the required field will be validated on input (dirty). If you want to have them validated on submit before any input (pristine), then you can run a function on your submit button that will check for pristine fields and dirty them.

That is what i have done in the example: http://jsfiddle.net/yq4NG/6/

You could probably build a reusable solution using custom formatters and validators but this is a simple on off solution.

EDIT:

Simpler again using just classes: http://jsfiddle.net/yq4NG/8/

EDIT [as suggested by @XMLilley in the comments]:

Because angular doesn't provide a $setDirty() method that's equivalent to $setPristine() we're triggering the $dirty state by simply updating the $viewValue with the contents of the $modelValue. It changes nothing, but simulates a user having manually entered each $pristine field and messed around with the value without changing anything.

Matthew.Lothian
  • 2,072
  • 17
  • 23
  • Thanks for your solution. I forgot to save the fiddle, that's why i was missing the ng-app. But that's the kind of complex solutions that I was trying to avoid. Isn't something build-in that I am missing? I can not believe that it is a rare corner-case usage. (assigning to a control the same value just to show a validation, seems a little awkward) – Fernando Aug 20 '13 at 00:38
  • Angular validation is about in place and instant response. Unlike server side validation. The required fields are validated. The form will not submit if the required attributes are set and not filled in, noted by the class "ng-invalid-required". But the fields are not dirty as they have not been changed. – Matthew.Lothian Aug 20 '13 at 01:07
  • 1
    @Fernando I have updated my answer with another solution you might find better suits your needs. If this is not the solution you are looking for let me know. If it is, please mark it as an answer. – Matthew.Lothian Aug 21 '13 at 03:41
  • Tahnks Matthew ! It is much better and I'll use your solution, but I can't stop feeling that it should be handled almost automatically by angular. (as jquery validation does). Thanks a lot for your time, patience and dedication :) – Fernando Aug 22 '13 at 00:00
  • No problem. As mentioned before, angular only validates the fields, giving you the state of the form and its fields in the form of classes and $scope. How you choose to visually display this is completely up to you. Helpers like [link]http://getbootstrap.com/ aim to standardize the visual display. you may find some help there. All the best. – Matthew.Lothian Aug 22 '13 at 04:26
  • 1
    For anyone looking for the bottom line on @Matthew.Lothian 's very useful answer: because angular doesn't provide a `$setDirty()` method that's equivalent to `$setPristine()` you're triggering the `$dirty` state by simply updating the `$viewValue` with the contents of the `$modelValue`. It changes nothing, but simulates a user having manually entered each `$pristine` field and messed around with the value without changing anything. (Please feel free to steal this explanation and add to your answer.) Simple and effective. Angular provides no better option that I can find. – XML Jan 28 '14 at 23:57
  • Thanks @XMLilley. I am happy for you to edit my answer with this description if you want. I may get around to it later. – Matthew.Lothian Jan 29 '14 at 03:27