Validation using angularJS in multi step form

Question

I have a multi-step form

<div ng-init="tab=1">
<form name="mf" novalidate  ng-submit="mfCtrl.postForm()"   >
    <div ng-show="tab===1">

        <div class="form-group ">
            <label for="exampleInputEmail1">Full Name</label>
            <input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
            <div class="error" ng-show="mf.name.$invalid && submitted">
                <small class="error" ng-show="mf.name.$error.required">
                    Your name is required.
                </small>  
            </div>
        </div>

        <button type="button" class="btn btn-primary next"  ng-click="tab=2" >Next</button>

    </div>

    <div ng-show="tab===2">

        <div class="form-group">
            <label for="exampleInputEmail1">Mobile</label>
            <input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required  />
            <div class="error" ng-show="submitted && mf.mobile.$invalid">
                <small class="error" ng-show="mf.mobile.$error.required">
                    Your mobile number is required.
                </small>
            </div>
        </div>

        <button type="button" class="btn btn-primary next"  ng-click="tab=3" >Next</button>

    </div>

    <div ng-show="tab===3">

    </div>
</form>
</div>

I want to do validation at each step but the button at each step is not a submit button. I have tried many things but nothing is working.In one of the method I used on clicking the button the validation works but it also increments tab which is of no use.

Please provide a solution for this problem.

Note- I don't wont to disable my button but show error on button click

yukuan · Accepted Answer · 2015-12-04 11:52:19Z

1

you may need this post

also I guess(I'm not sure it will work, just try :), you can try to use ng-if instead of ng-show:

<form name="mf" novalidate  ng-submit="mfCtrl.postForm()"   >
<div ng-if="tab===1">

    <div class="form-group ">
        <label for="exampleInputEmail1">Full Name</label>
        <input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
        <div class="error" ng-show="mf.name.$invalid && submitted">
            <small class="error" ng-show="mf.name.$error.required">
                Your name is required.
            </small>  
        </div>
    </div>

    <button type="button" class="btn btn-primary next"  ng-click="tab=2" >Next</button>

</div>

<div ng-if="tab===2">

    <div class="form-group">
        <label for="exampleInputEmail1">Mobile</label>
        <input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required  />
        <div class="error" ng-show="submitted && mf.mobile.$invalid">
            <small class="error" ng-show="mf.mobile.$error.required">
                Your mobile number is required.
            </small>
        </div>
    </div>

    <button type="button" class="btn btn-primary next"  ng-click="tab=3" >Next</button>

</div>

<div ng-if="tab===3">

</div>

answered Dec 4, 2015 at 11:52

yukuan

5615 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keyur Shah Over a year ago

ng-show & ng-hide simply toggle the visibility of an element or DOM fragment that’s already in the DOM, while ng-switch and ng-If actually detach and reattach the elements/fragments/templates from the DOM

Gurmeet Singh · Accepted Answer · 2015-12-07 05:07:36Z

Finally after banging my head for 1 day I have found the solution. So, anyone looking to create a multi step form with easy validation using AngularJS can use this code:

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
  $scope.cctab= 1;  
  $scope.submitted = false;
  $scope.go = function() {
   if ($scope.signup_form.$valid) { // Submit as normal 
    $scope.cctab=2;
   } else {
    $scope.signup_form.submitted = true;
   } 
  }   
 });
</script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
 {{cctab}}
  <form name="signup_form" ng-submit="signupForm()"  novalidate>
   <div ng-show="cctab===1">
    <div class="row">
     <div class="large-12 columns">
      <label>Your name</label>
      <input type="text"    placeholder="Name"  name="name" ng-model="signup.name"   ng-minlength=3 ng-maxlength=20 required />
      <div class="error"    ng-show="signup_form.name.$invalid &&   signup_form.submitted">
     <small class="error"   ng-show="signup_form.name.$error.required">
     Your name is required.
     </small>
     <small class="error"
     ng-show="signup_form.name.$error.minlength">
     Your name is required to be at least 3 characters
     </small>
     <small class="error"
      ng-show="signup_form.name.$error.maxlength">
     Your name cannot be longer than    20 characters
     </small>
     </div>
     </div>
   </div>
   <input type="button" ng-click="go()" value="next" >
</div>
<div ng-show="cctab===2">
<input type="text" name="username" id="name" placeholder="lname"/>
<input type="button"  >
</div>
</form>
</body>

Shota · Accepted Answer · 2015-12-04 11:43:47Z

0

Note: this is not a direct answer to this question, but recommendation

I've worked on a project where exact kind of thing was needed, multi step wizard with validation, data saving and so on. And as started doing it with ui-router, finally it became very buggy, then I've found a brilliant module: angular-multi-step-form and it saved me a lot of time and was bug free. it has validation, data saving and so on.

answered Dec 4, 2015 at 11:43

Shota

7,3989 gold badges40 silver badges74 bronze badges

1 Comment

Gurmeet Singh Over a year ago

I went through the link. But I don't want to disable my button until error is removed. But to show the error when the button is clicked. Thanks for your help & suggestion :)

Collectives™ on Stack Overflow

Validation using angularJS in multi step form

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related