CODEWITHSUNDEEP
javascriptformsangularjsvalidation
CorayThan
CorayThan

Reputation: 17825

Angular form submitting despite validation error

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>

Upvotes: 2

Views: 2758

Answers (3)

Tyler Biscoe
Tyler Biscoe

Reputation: 2422

EDIT:

When I wrote the answer below, I was under the assumption that the ngClick was completely separate from any form submission handlers that angular uses. I was wrong, however, as shown in the comments below. I'll keep this answer up, despite its inaccuracy, to inform those that come 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.org/api/ng/directive/ngSubmit

Upvotes: 0

Diego
Diego

Reputation: 651

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.org/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)">

Upvotes: 8

James
James

Reputation: 386

You could disable the button until the form has valid data

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

Upvotes: 1

Related Questions