angularjs: trigger form validate programmatically (inside a controller)

Question

I have this situation in which I show 1 form in two steps. So to proceed to the second part of the form you have to click on a button. But before moving on I would like to perform form validation (all required fields need to be filled in). But because this is a normal button, the whole submit magic is not triggered and the validation does not happen. So the question I'm interested in is how can I trigger form validation in my controller ? It would even be better to trigger validation for specific fields. Just to give an idea, the form looks like

<form name="form" submit="save()">
    <section id="step1">
        <label for="username" required>Username</label>
        <input type="text" name="username" ng-model="user.username" required />
        .....
        <button ng-click="proceed()">Proceed</button>        
    </section>
    <section id="step2">
         <label ...></label>
         <input...>
         ....
         <button type="submit">Save</button>
    </section>
</form>

Also, I don't want to opt for disabling the button until all required fields are valid.

Why do you want 1 form? You can split it in two and use Angular's validation. And the "proceed" button should be enabled only if the first form is valid. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Sep 24, 2013 at 20:52
I think the right way is to done a directive for the validation .. — Thomas Pons
– Thomas Pons, Commented Sep 24, 2013 at 20:54
I choose one form because the whole submit back to the server (with file uploads etc) is easier, just one call. And how can this be done with a directive ? — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Sep 24, 2013 at 20:59

Nikos Paraskevopoulos · Accepted Answer · 2013-09-24 21:17:34Z

19

Take a look at the ng-form directive. It allows nesting forms (actually not HTML <form>s, but Angular NgFormControllers). So you can split your one form, used for posting to the server, into two logical forms, used for independent validation:

<form submit="save()">
    <div ng-form="form1">
        ...controls...
        <button ng-click="proceed()"
            ng-disabled="form1.$invalid">Proceed</button>
    </div>
    <div ng-form="form2">
        ...controls...
        <button type="submit"
            ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
    </div>
</form>

answered Sep 24, 2013 at 21:17

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

Comments

Jonathan Palumbo · Accepted Answer · 2013-09-24 21:06:31Z

10

You can access the $valid property from your controller. Something like this could work.

 $scope.proceed = function(){     
      if($scope.form.username.$valid){
          //username is valid we may proceed to the next step
      }
 };

answered Sep 24, 2013 at 21:06

Jonathan Palumbo

6,8711 gold badge31 silver badges40 bronze badges

Comments

Nitish Kumar · Accepted Answer · 2013-09-24 21:04:06Z

-1

 <button ng-click="proceed()">Proceed</button>

Replace To :

 <button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>

Button will not visible button until all required fields are valid.

DEMO

answered Sep 24, 2013 at 21:04

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

1 Comment

Aaronaught Over a year ago

No, not correct. This isn't the same thing from a UI perspective. Disabling the button tends to confuse users. It's generally thought of as a better practice to always leave the button enabled, and only show error messages either while the form is being filled out or after form submission.

Collectives™ on Stack Overflow

angularjs: trigger form validate programmatically (inside a controller)

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related