current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 8 down vote favorite
1

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.

share|improve this question
    
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 Sep 24 '13 at 20:52
    
I think the right way is to done a directive for the validation .. – Thomas Pons Sep 24 '13 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 Sep 24 '13 at 20:59
up vote 18 down vote accepted

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>
share|improve this answer
up vote 9 down vote

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
      }
 };
share|improve this answer
up vote -1 down vote 
 <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

share|improve this answer
    
@Jeanluca is it correct answer – Nitish Kumar Sep 25 '13 at 5:10
4  
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. – Aaronaught Mar 8 '14 at 15:42
up vote -1 down vote

Maybe it helps someone. I thought i have to trigger it manually because the validation didn't worked. But the first post from "Nikos Paraskevopoulos" is correct.

It was a nested form and in this case you only need to use ng-form.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.