javascript - Form Validation with tabs: jump to first invalid tab -


this follow-up question validation in form tabs using nested ng-forms.

in jsfiddle http://jsfiddle.net/gaby/lrfry/4/ have form won't submit unless it's subforms $valid. how make jump first invalid tab when user tries submit?

i think better if use directive because going touch dom , because can group logic need form in 1 place (you thank when app grows) , form becomes more portable well.

i have changed form bit, it's using 1 ngform , tabs normal divs. form , it's inputs given names because ngform directive needs them create formcontroller object.

the directive listening clicks on submit button , use formcontroller object check errors , react accordingly.

.directive('myform', function () {     return {       restrict: 'a',       link: function (scope, elm, attrs) {           var inputs = elm.find('input'), //get form inputs              inputtab1 = inputs[0], //asign each input var              inputtab2 = inputs[1],              submit = inputs[2];           scope.msg='not submitted';          scope.tab=1           //*** ng-form create scope var called myform (myform form's name)           angular.element(submit).bind('click', function (event) {                if(scope.myform.$valid) {                   //form valid let 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();                      });                   }                   }           });       }    }; }); 

here fiddle

if want deeper angular's form recommend this tutorial.


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -