Display errors on invalid submit

[ajarti]

Hi,
Firstly thanks for a great tool.

I am having an issue showing errors on form submission. if I use the recommended css selector

.valdr-message.ng-invalid.ng-touched.ng-dirty

to show the errors this only works if the user actually visits the fields. If the user tries to submit the form without filiing in the fields the ng-touched and ng-dirty never trigger and hence errors do not display?

I have searched all the documentation & issues and cannot find a workaround, any suggestions?

I was thinking to add a class to the form if a submission was made and then have an inherited selector.

Thanks in advance.

[marcelstoer]

How about disabling the submit button until the form is valid? In our little demo we use that approach: https://github.com/netceteragroup/valdr/blob/gh-pages/index.html#L183

[ajarti]

Hi Marcelstoer,
Thanks for the suggestion. I saw that in the demo, but from a UX point of view, users tend to go blind and miss obvious things (like fill out the form doofus!! lol), so for them having a element that is disabled and having no idea why just causes them to bounce.

I added a class (aj-form-checked) to the form on submission and then used:

form.aj-form-checked .valdr-message { display: block; }

This works fine for my use case, possibly adding a method to valdrProvider to add a .valdr-submitted class on form.$submitted to the form might be an idea.

Anyway thanks again for the fast response and a great tool.

[marcelstoer]

I saw that in the demo, but from a UX point of view, users tend to go blind and miss obvious things (like fill out the form doofus!! lol), so for them having a element that is disabled and having no idea why just causes them to bounce.

I fully agree...but...how many of your users tend to forget to fill in the form? Are you looking for a solution to a problem that is only a "perceived" problem?
Also, I would assume that if your web front-end has forms there's also a back-end of some sort. And if you have a back-end validation in the front-end is nothing more than a UX-improvement - the validation in the back-end is what counts.
Again, I don't know your context but based on the two points raised above I would ask "So, what if 1 of 100 users clicks the submit button before valdr had a chance to validate all form fields? No harm done, the back-end doesn't accept the invalid/inconsistent form anyway." (and there have to be means to visualize this for the user)

[ajarti]

Too true, I may very well be over optimizing here .. lol

I think it was not so much the whole form being skipped, but say one field in a large form. I was also trying to avoid the round trip validation to the server, but as I said possible over optimization here.

Thanks again for taking the time to comment and assist, much appreciated.