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
Post a Comment