I've written a form with Angular.js that requires a field to be filled out before it is submitted. The validation works correctly (the field shows a validation error when I submit the form) but the form still seems to perform its ng-click action.

Are angular forms supposed to submit despite validation errors? What's the best way to prevent it from submitting if there are validation errors?

Here's the form in question:

<form role="form">
    <div class="form-group">
        <label>Book Id</label><br> 
        <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
    </div>
    <button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button>
</form>

I've written a form with Angular.js that requires a field to be filled out before it is submitted. The validation works correctly (the field shows a validation error when I submit the form) but the form still seems to perform its ng-click action.

Are angular forms supposed to submit despite validation errors? What's the best way to prevent it from submitting if there are validation errors?

Here's the form in question:

<form role="form">
    <div class="form-group">
        <label>Book Id</label><br> 
        <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
    </div>
    <button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button>
</form>

• javascript
• forms
• angularjs
• validation

Share Improve this question Follow asked Jun 30, 2014 at 19:22 NelainaNelaina 17.9k2929 gold badges118118 silver badges164164 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Angular doesn't prevent forms from submitting when there are validation errors.

Actually with the snippet you pasted, the errors are shown just because by default error validation is provided with html5.

You should check the docs: https://docs.angularjs/guide/forms

Basically you have to name your form:

<form name="myForm" role="form">

and then you can prevent your form from submitting inside your controller with:

$scope.sendBookUpdate(BookToSend, form) {
  if (form.$invalid) {
    return; // and add any error to the view if you want
  }

  ...
}

another option is to prevent submitting from the view:

<form name="myForm" role="form" ng-submit="myForm.$valid && sendBookUpdate(BookToSend)">

You could disable the button until the form has valid data

<button type="submit" data-ng-disabled="form.$invalid">Send Book Update</button>

EDIT:

When I wrote the answer below, I was under the assumption that the ngClick was pletely separate from any form submission handlers that angular uses. I was wrong, however, as shown in the ments below. I'll keep this answer up, despite its inaccuracy, to inform those that e here with the same misunderstanding as I had, since, to me at least, it's kind of counter-intuitive to have an ng-click double as a submit handler.

---

ng-click is separate from the form's submit handler, and will run every time you click the button regardless of whether or not it passes the validation checks.

The solution to your problem would be to take sendBookUpdate(BookToSend), and place it in an ng-submit attribute on the form itself. See the code below:

<form role="form" ng-submit="sendBookUpdate(BookToSend)">
    <div class="form-group">
        <label>Book Id</label><br> 
        <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
    </div>
    <button type="submit">Send Book Update</button>
</form>

Let me know if that helps.

Edit:

Here's some more info regarding ngSubmit:

https://docs.angularjs/api/ng/directive/ngSubmit