AngularJS - Form validation triggered on load

Question

I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.

I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.

I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?

Update

Here's an example https://jsfiddle.net/davidshen84/00t197gx/

<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
  <label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>

On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.

Note: The style on the check button does not work...should not be a concern in the problem.

could you please add some markup? how you are showing a validation? using ng-messages or showing and hiding divs using ng-show..? — Pankaj Parkar
– Pankaj Parkar, Commented Oct 21, 2015 at 1:56
this doesn't sound like normal behavior, but without a sample of your code, it's hard to know why this is happening or offer alternatives. — Claies
– Claies, Commented Oct 21, 2015 at 1:58

m59 · Accepted Answer · 2015-10-21 02:42:59Z

2

Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.

Click here for live demo.

edited Oct 21, 2015 at 2:42

answered Oct 21, 2015 at 2:37

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David S. Over a year ago

yeah, I thought about this method. But my situation is a bit more complex because my code mixed with material.js

nick Over a year ago

This won't work if the user simply tabs through the fields as $dirty is only assigned when the control's model is modified.

dgrubelic · Accepted Answer · 2015-10-22 11:12:27Z

0

What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:

if (input.form.novalidate = true) // skip validation

that way you can actually turn off mdl validation and leave everything to angular. One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:

div class="mdl-textfield" mdl-validator="form.email.$error"

answered Oct 22, 2015 at 11:12

dgrubelic

2511 silver badge4 bronze badges

Collectives™ on Stack Overflow

AngularJS - Form validation triggered on load

Update

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related