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

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

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" />

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).

Encore une autre manière (dynamique):

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

Et pour le réactiver, nous avons simplement réinitialisé la valeur par défaut:

$("form").validate().settings.ignore = ":hidden";

Source: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

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

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.

(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)

$("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 :)

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.

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.

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

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

<button type="submit" formnovalidate="formnovalidate">submit</button>

travaille aussi