Plug-in jQuery Validation: désactiver la validation pour les boutons d'envoi spécifiés


167

J'ai un formulaire avec plusieurs champs que je valide (certains avec des méthodes ajoutées pour la validation personnalisée) avec l'excellent plugin jQuery Validation de Jörn Zaeffere. Comment contourner la validation avec des contrôles de soumission spécifiés (en d'autres termes, la validation au feu avec certaines entrées de soumission, mais ne déclenche pas la validation avec d'autres)? Cela serait similaire à ValidationGroups avec des contrôles de validation ASP.NET standard.

Ma situation:

C'est avec ASP.NET WebForms, mais vous pouvez l'ignorer si vous le souhaitez. Cependant, j'utilise davantage la validation comme une "recommandation": en d'autres termes, lorsque le formulaire est soumis, la validation se déclenche mais au lieu d'un message "obligatoire" qui s'affiche, une "recommandation" montre qui dit quelque chose du genre "vous vous avez manqué les champs suivants .... voulez-vous quand même continuer? " À ce stade, dans le conteneur d'erreurs, il y a un autre bouton de soumission maintenant visible qui peut être pressé qui ignorerait la validation et soumettrait de toute façon. Comment contourner les formulaires .validate () pour ce bouton de contrôle et toujours publier?

L'échantillon Acheter et vendre une maison sur http://jquery.bassistance.de/validate/demo/multipart/ permet cela afin d'accéder aux liens précédents, mais il le fait en créant des méthodes personnalisées et en l'ajoutant au validateur. Je préférerais ne pas avoir à créer des méthodes personnalisées de duplication de fonctionnalités déjà dans le plugin de validation.

Ce qui suit est une version abrégée du script immédiatement applicable que j'ai en ce moment:

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'
}); 

Spécifiez également le mot-clé return at button, afin qu'il ne disparaisse pas technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134

Réponses:


286

Vous pouvez ajouter une classe CSS cancelà un bouton d'envoi pour supprimer la validation

par exemple

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

Voir la documentation jQuery Validator de cette fonctionnalité ici: Ignorer la validation lors de la soumission


MODIFIER :

La technique ci-dessus a été déconseillée et remplacée par l' formnovalidateattribut.

<input formnovalidate="formnovalidate" type="submit" value="Save" />

1
Cela fonctionne-t-il avec <input />? J'ai ajouté class = "cancel" et cela ne fonctionne pas. J'utilise MVC2 avec MicrosoftMvcValidation. Je vous remercie.
VinnyG

4
@VinnyG - non utilisé MicrosoftMvcValidation (et ne le ferait jamais) - ce n'est pas la même chose que jquery validate.
redsquare

1
est-il possible d'obtenir le même comportement sans l'élément d'entrée? c'est-à-dire puis-je en quelque sorte déclencher (de manière documentée, contrairement à la réponse de lepe) la soumission d'un formulaire et ignorer la validation en même temps?
ivan

10
Remarque: cela ne fonctionne pas si vous ajoutez dynamiquement l'annulation de classe, c'est $('input[type=submit]').addClass('cancel')-à- dire que la classe doit être présente lors du chargement de la page.
lolesque

@lolesque, vous devrez probablement appeler à nouveau la méthode de validation à moins qu'ils n'aient changé son fonctionnement, notez la date sur cette réponse)
redsquare

107

Une autre façon (non documentée) de le faire est d'appeler:

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

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


Bonjour @lepe, vous savez comment réappliquer la validation jquery après l'écriture $("form").validate().cancelSubmit = true;. J'ai essayé $("form").validate().cancelSubmit = false;et j'ai appelé $("form").validate();à soumettre mon bouton de soumission. Merci
Jaikrat

3
Cela peut être fait comme $(yourForm).data('validator').cancelSubmit = false;Merci
Jaikrat


16

Ajouter l'attribut formnovalidate à l'entrée

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel"> 

L'ajout de class = "cancel" est désormais obsolète

Consultez la documentation pour ignorer la validation lors de la soumission sur ce lien


10

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

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

Remarque, j'utilise également la validation jquery avec ASP.NET WebForms. Il y a quelques problèmes à parcourir, mais une fois que vous les avez surmontés, l'expérience utilisateur est très bonne.


3

(Extension de @lepe's et @redsquareréponse pour ASP.NET MVC+ jquery.validate.unobtrusive.js)


Le plugin de validation jquery (pas celui discret de Microsoft) vous permet de mettre une .cancelclasse sur votre bouton d'envoi pour contourner complètement la validation (comme indiqué dans la réponse acceptée).

 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 confondez pas cela avec ce type='reset'qui est complètement différent)

Malheureusement, le jquery.validation.unobtrusive.jscode de gestion de la validation (ASP.NET MVC) bousille en quelque sorte le comportement par défaut du plugin jquery.validate .

C'est ce que j'ai proposé pour vous permettre de mettre .cancelsur le bouton de soumission comme indiqué ci-dessus. Si Microsoft "corrige" cela, vous pouvez simplement supprimer 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 cela ne fonctionne pas, assurez-vous de ne pas aller-retour vers le serveur et de voir une page générée par le serveur avec des erreurs. Vous devrez contourner la validation côté serveur par d'autres moyens - cela permet simplement au formulaire d'être soumis côté client sans erreur (l'alternative serait d'ajouter des .ignoreattributs à tout dans votre formulaire).

(Remarque: vous devrez peut-être ajouter buttonau sélecteur si vous utilisez des boutons pour soumettre)


c'est 4 heures de baise pour un putain de Pay with PayPalbouton d'
envoi

Cela n'a pas fonctionné pour moi avec le modèle MVC 5 par défaut. J'ai des packages Nuget JQuery 1.10.2, JQuery Validation 1.11.1, Microsoft jQuery Unobtrusive Validation 3.0.0. Ce qui a fonctionné pour moi est de remplacer les deux lignes de votre code par: $(this).closest('form').data("validator", null).unbind().submit();Cela définira le validateur sur null et le dissociera. Après cela, il soumettra le formulaire. Vous pouvez réinitialiser la validation par cette ligne:$.validator.unobtrusive.parse($("#YourUniqueFormId"));
Ralph Jansen

quelque part le long de la ligne, cela a été corrigé. J'ai pu commenter complètement cela et cela fonctionne maintenant avec une .cancelclasse. Note: si vous utilisez un type = « image » bouton d' envoi alors la .cancelclasse ne fonctionnera pas à moins que vous changez ":submit"de ":submit,:image"dans le plugin de validation jquery originale
Simon_Weaver

2
$("form").validate().settings.ignore = "*";

Ou

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

Mais sans succès dans un validateur personnalisé requis. Pour appeler une soumission de manière dynamique, j'ai créé un faux bouton de soumission caché avec ce code:

var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
    form.append(btn);
}
btn.click();

Maintenant, sautez la validation correctement :)


Si vous souhaitez simplement exclure une classe spécifique de la validation, vous pouvez l'utiliser à la place d'un astérisque. $("form").validate().settings.ignore = "class-name";
James Poulose

1

Cette question est ancienne, mais j'ai trouvé un autre moyen de la contourner $('#formId')[0].submit(), qui récupère l'élément dom au lieu de l'objet jQuery, contournant ainsi tous les hooks de validation. Ce bouton soumet le formulaire parent qui contient l'entrée.

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

Assurez-vous également que vous n'en avez pas inputnommé "submit", sinon il remplace la fonction nommée submit.


1

J'ai trouvé que le moyen le plus flexible est d'utiliser JQuery:

event.preventDefault():

Par exemple, si au lieu de soumettre, je souhaite rediriger, je peux faire:

$("#redirectButton").click(function( event ) {
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
});

ou je peux envoyer les données à un autre point de terminaison (par exemple, si je veux changer l'action):

$("#saveButton").click(function( event ) {
    event.preventDefault();
    var postData = $('#myForm').serialize();
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() {
    }).done(function() {
        alert("Data sent!");
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("Ooops, we have an error");
    })

Une fois que vous avez fait 'event.preventDefault ();' vous contournez la validation.


1

J'ai deux boutons pour la soumission du formulaire, le bouton nommé enregistrer et quitter contourne la validation:

$('.save_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});

0

Voici la version la plus simple, j'espère que cela aide quelqu'un,

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.