防止提交带有必填字段的表单

AngularJS - prevent submissions of form with required fields

本文关键字：字段 表单 提交      更新时间：2023-09-26

我有一个AngularJS表单，里面有3个必填字段(使用ng-required)。不触摸表单上的任何东西，只是简单地按下"提交"按钮(ng-click="提交")，我如何触发验证所需的字段和防止表单提交?我试过了:

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

触发验证，但也提交表单，即使表单在技术上是无效的??

我会看一下angular-validator: https://github.com/turinggroup/angular-validator。这是非常有用的，并且真正地简化了您的验证代码。ng-Message很好，但是你最终要维护更多的HTML，因此它似乎会有更多的手表。

  <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>

既然您提到您正在对单个元素进行验证，并且不知道检查整个表单是否有效。您可以使用以下条件来检查表单是否有效

$scope.yourFormName.$valid

使用上述条件检查表单是否有效。只有当表单内所需的所有验证都有效时，上述条件才为真。希望这就是你要找的

我使用了ng-submit指令，因为它触发了表单。$submitted并在提交前正确验证ng-required字段。

对于有多个按钮的情况，我为每个按钮添加了一个ng-click，并简单地更改了一个$scope变量(例如$scope. pressedbtn)。在ng-submit指向的函数中，您可以这样做:

if ($scope.pressedBtn === 'button1') {
    // submit
}
else if ($scope.pressedBtn === 'button2') {
    // save
}
相关文章：