Angular JS and validation step by step

Question

I have an angular js wizard with steps:

<wizard on-before-step-change="log(event)" on-step-changing="log(event)" on-after-step-change="log(event)" user="user">

<step title="step 1">

</step>

<step title="step 2">

</step>

<step title="step 3">

</step>

</wizard>

and in each of these steps there are input fields and I am looking to validate each step at a time when they click my next button:

<a class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>

and here is the click event:

$scope.gotoNextStep = function () {
          //Validation
          toggleSteps($scope.currentStepIndex + 1);
      }

I was looking to use jQuery validation and have the required class in each of my input fields, but if I went down that road how would I have it validate one step at a time? Or is there a better way to go about this? I have did some searching on the subject, but I found the examples I found very confusing and complicated...any help would be much appreciated.

THanks.

Does each step have it's own button?

Ben Felda
– Ben Felda

2014-06-11 13:43:37 +00:00
Commented Jun 11, 2014 at 13:43 — Ben Felda
– Ben Felda, Commented Jun 11, 2014 at 13:43
no they do not, this button is used for all steps

user3723240
– user3723240

2014-06-11 17:16:43 +00:00
Commented Jun 11, 2014 at 17:16 — user3723240
– user3723240, Commented Jun 11, 2014 at 17:16

Brocco · Accepted Answer · 2014-06-11 13:39:51Z

4

Angular provides a framework for validating forms (documentation) and you can verify based upon $valid (or $invalid) for each step.

Also note that you can have one parent form, with each step utilizing the ng-form directive to work as a nested form.

I would add the following:

<wizard>
  <step> <!-- step 1 -->
    <div ng-form="step1" name="step1">
      <button ng-disabled="step1.$invalid">Next Step</button>
    </div>
  </step>
</wizard>

If you need to define a new validation, you can follow this excellent article

edited Jun 11, 2014 at 13:39

answered Jun 11, 2014 at 3:01

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

5 Comments

user3723240 Over a year ago

so I would add ng-form to each of my steps and then what do I do with $valid or $invalid....can u provide an example?

user3723240 Over a year ago

your example is great, but I am looking to do the validation in the $scope.gotoNextStep function...is that possible?

Brocco Over a year ago

You can use: <button ng-click="gotoNextStep(1 /*step #*/, step1.$invalid)">... to get the validity into your $scope

user3723240 Over a year ago

Will that work? I am reusing the same button for each step to goto the next step.

Brocco Over a year ago

You can make the params dynamic gotoNextStep(stepNumber) and then reference the form dynamically in your controller... see this example: plnkr.co/edit/w4fbqsOHIxNGJFh18FOT?p=preview

Collectives™ on Stack Overflow

Angular JS and validation step by step

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related