angularjs - form and validation

Question

how to prevent the auto validation on a form? Everytime I load the template with the form, it automatically validates itself even without any data typed in to the inputs.
I want to trigger the validation on submit.

HTML:

<span ng-show='message.$invalid == true'>This e-mail is black-listed!</span>
    <form novalidate class="dealermessageform" name="message">
        <input type="text" name="messagename" placeholder="Name" class="messagename" ng-model="user.name" required>
        <input type="email" name="messageemail" placeholder="E-Mail Adresse*" class="messageemail" ng-model="user.email" required>
        <textarea class="message" name="message" placeholder="Schreibe eine Nachricht. *" required></textarea>
        <span class="help-block">*alle markierten Felder sind Pflichtfelder</span>
        <div class="grid_4 alpha omega submitbutton">
            <input type="submit" class="submitbutton" value="Senden" id="submit" ng-click="send()">
        </div>
    </form>

And how is it possible, to show the "span" field above the form, ONLY if some errors are TRUE after submit?
It also directly shows up when I enter the form.

asgoth · Accepted Answer · 2013-01-09 10:21:05Z

1

It shouldn't be a problem if validation already occurs. You just shouldn't show the error message. You can do that with $pristine or $dirty, depending if you use ng-show or ng-hide:

<span class="help-block" ng-show="message.$dirty && message.$invalid">*alle markierten Felder sind Pflichtfelder</span>

In your send() function, you better add message as a parameter. You can also use ng-submit on the form tag instead.

edited Jan 9, 2013 at 10:21

answered Jan 8, 2013 at 11:03

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

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

4 Comments

Marek123 Over a year ago

looking good! Is it possible to send feedback of the "ng-submit" to an other rout/partial? My form template is "dealer-message.html" but I need the feedback on "dealer-details.html" - is this possible?

asgoth Over a year ago

You need to look at $routeParams. You could define a route (in $routeProvider) '/details/feedback/:feedback'. When you change your route (with $location), you just add the feedback to the url (using encodeURIComponent): var url = '/details/feedback/' + encodeURIComponent(feedback);

JeremyWeir Over a year ago

Here's another possibility to play around with for controlling when to show errors... stackoverflow.com/a/15842283/45767

Matthias Over a year ago

In fact, you should use ng-submit on the form element, instead of ng-click. Because ng-click won't work if the user hits Enter.

Collectives™ on Stack Overflow

angularjs - form and validation

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related