Plugin de validation jQuery: désactive la validation pour les boutons de soumission spécifiés

Question

J'ai un formulaire avec plusieurs champs que je suis la validation (certains avec des méthodes ajoutées pour la validation personnalisée) avec Jörn Zaeffere excellent plugin jQuery Validation. Comment contourner la validation avec spécifiée soumettre aux contrôles (en d'autres termes, le feu de validation avec certains soumettre des entrées, mais pas de feu de validation avec les autres)? Ce serait semblable à ValidationGroups avec la norme ASP.NET des contrôles de validateur.

Ma situation:

C'est avec ASP.NET WebForms, mais vous pouvez l'ignorer si vous le souhaitez. Cependant, je suis en utilisant la validation plus qu'une "recommandation": en d'autres termes, lorsque le formulaire est soumis, à la validation des feux mais au lieu d'une "obligation" d'affichage des messages, une "recommandation", montre que, dit quelque chose le long de la ligne de "vous avez raté les champs suivants.... voulez-vous continuer, de toute façon?" À ce point dans l'erreur conteneur il y a un autre bouton soumettre maintenant visibles qui peuvent être pressés qui ne tiendrait pas compte de la validation et de soumettre de toute façon. Comment contourner les formes .validate() pour ce bouton de contrôle et encore de post?

Le Acheter et Vendre une Maison de l'échantillon à http://jquery.bassistance.de/validate/demo/multipart/ permet de faire cela dans le but de toucher les liens ci-dessus, mais il le fait à travers la création de méthodes et de l'ajouter au programme de validation. Je préfère ne pas avoir à créer des méthodes de dupliquer les fonctionnalités déjà dans la validation du plugin.

Ce qui suit est une version abrégée de l'applicables immédiatement script que j'ai maintenant:

var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
}); 

Merci beaucoup à l'avance pour les renseignements utiles.

[Mise à JOUR] Grâce à redsquare j'ai découvert qu'il est aussi facile que d'ajouter class="annuler" pour le bouton "soumettre". Si facile et pourtant je n'ai aucune idée de comment je n'ai pas rencontré de toute ma recherche.

Et pour ceux qui disent que mon suivi de répondre au sujet ", mais nécessite un double-clic": c'était simplement dû à un reste de l'expérience qui était la déliaison de l'événement - de nouveau, quelque chose que je ne sais pas comment j'ai négligé lors de l'essai. Merci!

Answer 1

Vous pouvez ajouter une classe css d'annulation à un bouton de soumission pour supprimer la validation

par exemple

 <input class="cancel" type="submit" value="Save" />
 

Answer 2

Un autre moyen (non documenté) de le faire est d'appeler:

 $("form").validate().cancelSubmit = true;
 

sur l'événement de clic du bouton (par exemple).

Answer 3

Vous pouvez utiliser le onsubmit:faux option (voir la documentation) lors du câblage de validation qui ne sera pas validé lors de la soumission du formulaire. Et puis dans votre asp:bouton ajouter un OnClientClick= $('#aspnetForm').valide(); explicitement vérifier si le formulaire est valide.

On pourrait appeler cela le modèle opt-in, au lieu de l'opt-out décrit ci-dessus.

Remarque, je suis également à l'aide de jquery de validation avec ASP.NET WebForms. Il y a quelques questions à naviguer, mais une fois que vous obtenez à travers eux, l'expérience utilisateur est très bon.

Answer 4

(L'Extension de la @lepes et @redsquare réponse ASP.NET MVC + jquery.validate.unobtrusive.js)

---

Le plugin jquery validation (pas Microsoft qui passe inaperçue) vous permet de mettre un .cancel classe sur votre bouton "soumettre" pour contourner la validation complètement (comme le montre accepté de répondre).

 To skip validation while still using a submit-button, add a class="cancel" to that input.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

(ne pas confondre avec type='reset' qui est quelque chose de complètement différent)

Malheureusement, l' jquery.validation.unobtrusive.js validation de manutention (ASP.NET MVC) code un peu vis jusqu'à la jquery.valider plugin comportement par défaut.

C'est ce que j'ai trouvé pour vous permettre de mettre .cancel sur le bouton soumettre, comme indiqué ci-dessus. Si Microsoft jamais "résout" ce, alors vous pouvez simplement remvoe ce code.

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').data("validator").cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

Remarque: Si au premier essai, il semble que ce n'est pas, assurez-vous que vous n'êtes pas d'allers-retours vers le serveur et de voir générées par le serveur de la page avec des erreurs. Vous aurez besoin de contourner la validation côté serveur par un autre moyen, cela permet tout simplement le formulaire pour être soumis côté client sans erreurs (l'alternative serait l'ajout d' .ignore attributs pour tout dans votre formulaire).

(Remarque: vous devrez peut-être ajouter button du sélecteur si vous utilisez des boutons à soumettre)