Javascript 如何触发自定义事件以触发部分表单验证？

我试图通过单击一个名为“下一步”的按钮一步一步地验证我的表单。 是否有方法触发自定义事件以触发部分表单验证？ 诸如此类：

<input type="text" id="age-id" name="age" 
  ng-model-options="{updateOn: 'ValidateStepOne'}" 
  min="18"
  max="99"
  ng-model="data.age"
>

任何帮助都将不胜感激。 问候

---

OliverKK

您可以将表单分成多个部分，使用

ng if

来决定是否显示它们

<form action="" name="myForm">
    <div ng-if="step == 1">
        <input type="text" required="true" name="input1" ng-model="inputVal1"/>
    </div>
    <div ng-if="step == 2">
        <input type="text" required="true" name="input2" ng-model="inputVal2"/>
    </div>            
</form>

---

请参见。

我将巨大的表单拆分为子表单（感谢@fiskers7），这非常方便。 通过在上单击进行验证

next

按钮以验证当前步骤。 触发自定义提交事件时，将执行

required

验证程序和其他使用的验证程序

    <form id="form1" ng-submit="validate(1)" ng-model-options="{ updateOn: 'submit' }" novalidate>
      <input type="text" ng-model="name" required>
      <span ng-show="form1.$submitted && form1['name'].$error.required">Name is required!</span>
      <input type="submit" value="next">
    </form>

    <form id="form2" ng-submit="validate(2)" ng-model-options="{ updateOn: 'submit' }" novalidate>
      <input type="text" ng-model="surename" required> 
      <span ng-show="form2.$submitted && form1['surename'].$error.required">Name is required!</span>
      <input type="submit" value="next">
    </form>

有关更多详细信息，请参阅AngularJS文档：

问候

---

OliverKK

更多代码将有助于更好地理解布局。但是如果你有你的UI设置，就像我想的那样，你可以让每个步骤都有自己的表单，这样按钮提交会导致该步骤的表单验证。谢谢你的回复。步骤验证是发布公式前的预验证。无法将表单拆分为子表单。感谢您的回复。一开始我是按照你的建议做的。但事实证明，最好是将巨大的形状分割成较小的形状。这样做的关键是，每个表单都有自己的提交按钮，这使得验证非常简单。

    <form id="form1" ng-submit="validate(1)" ng-model-options="{ updateOn: 'submit' }" novalidate>
      <input type="text" ng-model="name" required>
      <span ng-show="form1.$submitted && form1['name'].$error.required">Name is required!</span>
      <input type="submit" value="next">
    </form>

    <form id="form2" ng-submit="validate(2)" ng-model-options="{ updateOn: 'submit' }" novalidate>
      <input type="text" ng-model="surename" required> 
      <span ng-show="form2.$submitted && form1['surename'].$error.required">Name is required!</span>
      <input type="submit" value="next">
    </form>

 $scope.validate = function(num) {
    $scope['form' + num].$setSubmitted(true);
    if (!$scope['form' + num].$valid) {
      $scope.scrollToTop();
    } else if (num < $scope.maxSteps) {
      $scope.next(num + 1);
    } else {
      $scope.submit();
    }
  }