Javascript 带选项卡的表单验证：跳转到第一个无效选项卡

这是问题的后续行动

---

在这个JSFIDLE中，我们有一个表单，除非它的所有子表单都是

$valid

，否则不会提交。当用户尝试提交时，如何使其跳转到第一个无效选项卡？

我找到了一个简单的解决方案，因此我将发布我的小提琴

您只需添加一个

ng，然后单击提交按钮上的

---

请注意，

$scope.form1.$valid

变量在控制器初始化时是未定义的。

我认为最好使用一个指令，因为您将要接触DOM，并且还因为您可以将此表单所需的所有逻辑组合在一个位置（当您的应用程序增长时，您会感谢它）而且表单也变得更便于携带

我对表单做了一些修改，现在它只使用了一个ngForm，标签是普通的div。表单及其输入被命名，因为ngForm指令需要它们来创建formController对象

该指令正在侦听对submit按钮的单击，我们使用formController对象检查错误并做出相应的反应

.directive('myForm', function () {
    return {
      restrict: 'A',
      link: function (scope, elm, attrs) {

         var inputs = elm.find('input'), //get all form inputs
             inputTab1 = inputs[0], //asign each input to a var
             inputTab2 = inputs[1],
             submit = inputs[2];

         scope.msg='not submitted';
         scope.tab=1

         //*** ng-form will create a scope var called myForm (myForm is the form's name)

         angular.element(submit).bind('click', function (event) {

              if(scope.myForm.$valid) {
                  //form is valid let it submit
                  scope.$apply(function () {
                    scope.msg = 'submited';
                  });
              }else {
                  //form has erros
                  //event.preventDefault();

                  if(scope.myForm.tab1.$invalid) {
                    scope.$apply(function () {
                        scope.tab = 1;
                        inputTab1.focus();
                    });
                  }else if(scope.myForm.tab2.$invalid) {
                     scope.$apply(function () {
                        scope.tab = 2;
                        inputTab2.focus();
                     });
                  }    
              }
          });
      }
   };
});

这是你的电话号码

---

如果您想更深入地了解Angular的表单，我建议。

感谢您分享您的解决方案。我一定会尝试将我可以重复使用的功能放在指令中。不过我和你有一个问题。通过使用inputTab1=输入[0]等。。。您的指令与DOM结构紧密相连，这在角度上是不好的。同意，该指令使用自己的模板会更好；）