How to make form submit to wait for validations to complete angular js

Question

I have a simple form and i have to validate many input fields on ajax call.

Many of input fields are reusable so i have used directive for them.

<input name="UserName" 
       type="text" 
       user-name-unique 
       ng-model="UserName" 
       required 
/>

Directive function :

 elem.on('blur', function(evt) {
   scope.$apply(function() {
     var data = { 'username': elem.val() };
     var ajaxConfiguration = { method: 'POST', url: 'url', data: data };
     async(ajaxConfiguration).success(function(data, status, headers, config) {
       ctrl.$setValidity('userNameUnique', !data.IsSuccess);
     });
   });
 });

Similarly i have many directives which validates the input using ajax call.

How to make my submit function to wait for all my ajax requests to complete?

Brian Vanderbusch · Accepted Answer · 2014-02-15 04:24:20Z

1

create a directive that your submit button can track, and then slap a disabled directive on your submit button that will only update once your custom directive fields are evaluated to true:

<input name="UserName" 
       type="text" 
       user-name-unique 
       ng-model="UserName" 
       required 
       validate="process()" //retun true/false, processed whenever value changes
/>


<form>
    <button type="submit" disabled>Submit</button>
</form>

Then create a listener for when the input updates, and check it's validated state

answered Feb 15, 2014 at 4:24

Brian Vanderbusch

3,3395 gold badges33 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

How to make form submit to wait for validations to complete angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related