jquery newbie: combiner valider avec hidding soumettre le bouton

Question

Je suis nouveau un jQuery. J'ai obtenu validate travailler avec ma forme avec ce (MVC 1.0/C#):

 <script type="text/javascript"> 
     if (document.forms.length > 0) { document.forms[0].id = "PageForm"; document.forms[0].name = "PageForm"; } 
     $(document).ready(function() { 
      $("#PageForm").validate({ 
       rules: { 
        SigP: { required: true } 
       }, 
       messages: { 
        SigP: "<font color='red'><b>A Sig Value is required. </b></font>" 
       } 
      }); 

     }); 
    </script> 

Je veux aussi cacher le bouton Soumettre pour prévenir le syndrome de la souris twitchy de provoquer l'entrée en double avant que le contrôleur se termine et réoriente (I utilise un pattern GPR). Les travaux suivants à cet effet:

<script type="text/javascript"> 
    // 
    // prevent double-click on submit 
    // 
     jQuery('input[type=submit]').click(function() { 
      if (jQuery.data(this, 'clicked')) { 
       return false; 
      } 
      else { 
       jQuery.data(this, 'clicked', true); 
       return true; 
      } 
     }); 
    </script> 

Cependant, je ne peux pas faire fonctionner les deux ensemble. Plus précisément, si la validation échoue après avoir cliqué sur le bouton Soumettre (ce qui se produit étant donné le fonctionnement du formulaire), je ne peux pas renvoyer le formulaire à moins que j'effectue une actualisation du navigateur qui réinitialise la propriété 'clicked'.

Comment puis-je réécrire la deuxième méthode ci-dessus pour ne pas définir la propriété cliquée sauf si le formulaire est validé?

Thx.

Answer 1

Si vous utilisez le plugin de validation this, il est livré avec une méthode valide().

jQuery('input[type=submit]').click(function() { 
     var self = $(this); 

     if (self.data('clicked')) { 
      return false; 
     } else if (self.closest('form').valid()) { 
      self.data('clicked', true); 

      return true; 
     }; 
    }); 

ou même:

jQuery('input[type=submit]').click(function(event) { 
     var self = $(this); 

     if (self.closest('form').valid()) { 
      self.attr('disabled', true); 
     }; 
    }); 

Answer 2

je le ferais comme ceci:

$('#PageForm').submit(function() { 
    if($(this).valid()) $(':submit', this).attr('disabled', true); 
}); 

Ceci est déclenché lors de la soumission du formulaire, recherche tous les boutons de soumission à l'intérieur et désactive si le formulaire était valide. Utilisez $('#PageForm :submit').removeAttr('disabled'); pour réactiver le bouton lorsque vous êtes prêt.

Answer 3

Pour ceux qui cherchent encore une réponse comme moi, voilà comment je l'ai fait:

$("#form1").validate({ 

    rules: { 
     customer_title: "required", 
     customer_firstName: "required", 
     customer_lastName: "required" 
     } 
    }, 
    messages: { 
     customer_title: "Please select a title", 
     customer_firstName: "Please enter a firstname", 
     customer_lastName: "Please enter a lastname" 
     } 
    }, 
     submitHandler: function(form) { 
     //submitButtonX is the class attribute i placed on the button 
     $('.submitButtonX').attr('disabled', 'disabled'); 
     form.submit(); 
    } 
});