ng-submit doesn't prevent submission

Question

There are a lot of similar questions on SO. I've gone through many of them and not found my problem.

I have a form that is using ng-submit. Unfortunately, pressing enter or clicking submit works even when the form is not valid. The ng-submit method is called.

CodePen Sample : http://codepen.io/calendee/pen/tgFhq

<form name="testForm" novalidate ng-submit="submit()">

  <label for="firstname">First Name:</label>
  <input type="text" name="firstname" ng-model="data.firstname" required="true" ng-minlength="4" ng-maxlength="10">

    <div class="errors">
      <p>firstname Errors:</p>
      <p ng-show="testForm.firstname.$error.required">firstname is required</p>
      <p ng-show="testForm.firstname.$error.minlength">firstname is too short</p>
      <p ng-show="testForm.firstname.$error.maxlength">firstname is too long</p>
    </div>              

    <label for="lastname">Last Name:</label>
      <input type="text" name="lastname" ng-model="data.lastname" ng-required="true" ng-minlength="4" ng-maxlength="10">

    <div class="errors">
      <p>lastname Errors:</p>
      <p ng-show="testForm.lastname.$error.required">lastname is required</p>
      <p ng-show="testForm.lastname.$error.minlength">lastname is too short</p>
      <p ng-show="testForm.lastname.$error.maxlength">lastname is too long</p>
    </div>              


  <button class="button button-balanced" type="submit">Submit</button>

</form>

If I change the form the ng-form the submit event does not work at all even when the form is valid.

CodePen Sample : http://codepen.io/calendee/pen/imJdc

<ng-form name="testForm" novalidate ng-submit="submit()">

  <label for="firstname">First Name:</label>
  <input type="text" name="firstname" ng-model="data.firstname" required="true" ng-minlength="4" ng-maxlength="10">

    <div class="errors">
      <p>firstname Errors:</p>
      <p ng-show="testForm.firstname.$error.required">firstname is required</p>
      <p ng-show="testForm.firstname.$error.minlength">firstname is too short</p>
      <p ng-show="testForm.firstname.$error.maxlength">firstname is too long</p>
    </div>              

    <label for="lastname">Last Name:</label>
      <input type="text" name="lastname" ng-model="data.lastname" ng-required="true" ng-minlength="4" ng-maxlength="10">

    <div class="errors">
      <p>lastname Errors:</p>
      <p ng-show="testForm.lastname.$error.required">lastname is required</p>
      <p ng-show="testForm.lastname.$error.minlength">lastname is too short</p>
      <p ng-show="testForm.lastname.$error.maxlength">lastname is too long</p>
    </div>              


  <button class="button button-balanced" type="submit">Submit</button>

</ng-form>

Does anyone have a suggestion for what I'm doing wrong here?

Answer 1

You could use the built in attribute $valid:

<form name="testForm" novalidate ng-submit="testForm.$valid && submit()">

The submit function is called only when testForm.$valid is true.

I learnt it in this tutorial : https://www.codeschool.com/courses/shaping-up-with-angular-js .

Answer 2

When you use ng-submit, the form will not be submitted to server directly. In submit() method you can decide whether to submit the form information to server or reject the submission. Check the form input controls validity then send the information to server side.