AngularJS - prevent submissions of form with required fields

Question

I have an AngularJS Form with 3 required fields inside (using ng-required). Without touching anything on the form and just simply pressing the 'Submit' button (ng-click="submit"), how do I trigger validation for the required fields AND prevent form submission? I've tried doing:

ng-required="form.$submitted && !firstName"

which triggers the validation, but also submits the form even though the form is technically $invalid??

try adding 'ng-disabled=firstname.trim().length<1' to the submit button when the — Sumodh S, Sep 24 '15 at 04:36
For angular form validation you can try this link http://stackoverflow.com/questions/32323910/angular-form-validation-not-working-properly — Keshav, Sep 24 '15 at 04:40
Seems like the only other solution I've seen is to use an angular.forEach loop to programmatically set each of the required input fields to a $dirty state on submit. — Android Noob, Sep 24 '15 at 04:44

score 2 · Answer 1 · answered Sep 24 '15 at 05:45

I would take a look at angular-validator: https://github.com/turinggroup/angular-validator. It is quite useful and really leans out your validation code. ng-Message is nice but you end up maintaining more HTML and therefore it seems it would be more watches.

  <form name="categoryForm" id="categoryForm" class="smart-form" angular-validator angular-validator-submit="save(true)" novalidate autocomplete="off">
      <fieldset>
        <section ng-class="{ 'has-error' : categoryForm.title.$invalid}">
          <label class="label">Title</label>
          <label class="input">
            <input name="title" type="text" ng-model="category.title" id="title" placeholder="Title" required
                   validate-on="dirty" required-message="'Title is required'">
          </label>
        </section>
        <section ng-if="isAdmin()">
          <div class="row">
            <section class="col col-6" >
              <label class="checkbox">
                <input type="checkbox" name="checkbox" ng-model="category.isGlobal">
                <i></i><span>Global</span></label>
            </section>
          </div>
        </section>
      </fieldset>
      <footer>
        <button  type="submit" class="btn btn-primary" ng-disabled="(categoryForm.$dirty && categoryForm.$invalid) || categoryForm.$pristine">
          Submit
        </button>
      </footer>
    </form>

I ended up using ng-submit instead. I didn't realize it triggers validations. — Android Noob, Sep 28 '15 at 23:03
Great, post your answer and mark it as answered. Next time post your code so it is easier for people to review and offer suggestions. — Enkode, Sep 29 '15 at 00:31

score 0 · Answer 2 · answered Sep 24 '15 at 04:50

Since you mention that you are doing validation for individual elements and don't know to check whether the entire form is valid or not. You can use the following condition to check whether the form is valid or not

$scope.yourFormName.$valid

Use the above condition to check whether the form is valid or not. The above condition will become true only when all the required validations inside the form are valid. Hope this is what you're looking for

score 0 · Accepted Answer · answered Sep 29 '15 at 00:38

I used the ng-submit directive as it triggers form.$submitted and validates ng-required fields properly before submitting.

For the case where you have multiple buttons, for I added an ng-click to each button and simply changed a $scope variable (e.g. $scope.pressedBtn). In the function that ng-submit points to, you could do something like:

if ($scope.pressedBtn === 'button1') {
    // submit
}
else if ($scope.pressedBtn === 'button2') {
    // save
}

AngularJS - prevent submissions of form with required fields

3 Answers3

Linked