Comment désactiver le bouton Soumettre lorsque le formulaire est soumis sans erreur

Question

Je souhaite désactiver le bouton Soumettre lorsqu'un utilisateur soumet le formulaire afin qu'il ne puisse pas cliquer deux fois sur le bouton Soumettre.

Je le javascript suivant codé dans ma page

 

$(document).ready(function(){ 
    $("form").submit(function(){ 
     $("form").find('input[type=submit]').attr('disabled', 'disabled'); 
    }); 
}) 
 

Cela fonctionne très bien. Mais quand j'ai appliqué la bibliothèque validate jquery et apposé le code suivant

 

$(document).ready(function(){ 
    $("form").submit(function(){ 
     $("form").find('input[type=submit]').attr('disabled', 'disabled'); 
    }); 

    $("form").validate({ 
      errorClass: "jqueryError", 
      errorElement: 'label', 
      success: 'jqueryValid', 
      messages: { 
       TopicCategory: { 
        required: 'Please choose a category for topic.' 
       }, 
       TopicSubcategoryId: { 
        required: 'Please choose a subcategory for topic.' 
       }, 
       TopicTitle: { 
        required: 'Please enter a title for topic.' 
       } 
      } 
     }); 
}) 
 

Le bouton d'envoi ne fonctionnait plus après avoir soumis la forme même s'il y a des entrées incomplètes dans le site (c.-à-forme avec des erreurs et l'utilisateur est invité à les remplir correctement). Lorsque l'utilisateur remplit le formulaire en corrigeant toutes les erreurs, le bouton d'envoi est désactivé.

Comment puis-je d'abord vérifier s'il n'y a pas d'erreurs dans le formulaire, puis désactiver le bouton Soumettre et ensuite le soumettre définitivement.

Merci

Answer 1

Ajoutez le paramètre suivant à jQuery Validation:

submitHandler: function(form) { 
    $(':submit', form).attr('disabled', 'disabled'); 
    form.submit(); 
} 

Answer 2

Je n'ai pas encore démarré avec jQuery. Mais je pense, vous pouvez faire quelque chose comme ceci:

$(document).ready(function(){ 
    $("form").submit(function(){ 
    }); 

    $("form").validate({ 
      errorClass: "jqueryError", 
      errorElement: 'label', 
      success: 'jqueryValid', 
      messages: { 
       TopicCategory: { 
        required: 'Please choose a category for topic.' 
       }, 
       TopicSubcategoryId: { 
        required: 'Please choose a subcategory for topic.' 
       }, 
       TopicTitle: { 
        required: 'Please enter a title for topic.' 
       } 
      } 
     $("form").find('input[type=submit]').attr('disabled', 'disabled'); 

     }); 
}) 

Answer 3

Je n'ai pas utilisé le plug-in validateur jquery, mais la lecture des documents ici

http://docs.jquery.com/Plugins/Validation/validate

vous pourriez

1) DISA ble sur le bouton dans le rappel de submitHandler

2) laisser votre code de désactivation existant, mais réactiver le bouton dans le rappel invalidHandler