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

Question

J'ai un formulaire avec plusieurs champs que je valide (certaines 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 les contrôles de soumission spécifiés (en d'autres termes, valider la validation avec certaines entrées de soumission, mais ne pas valider la validation avec d'autres)? Ce serait similaire à ValidationGroups avec les contrôles du validateur 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 en tant que "recommandation": en d'autres termes, lorsque le formulaire est soumis, la validation est déclenchée, mais au lieu de "obligatoire". affichage du message, une "recommandation" indique que vous avez oublié quelque chose dans la ligne "vous avez oublié les champs suivants ... souhaitez-vous continuer malgré tout?" À ce stade du conteneur d'erreurs, il est possible d'appuyer sur un autre bouton d'envoi maintenant visible qui ignorerait la validation et soumettrait de toute façon. Comment contourner les formulaires .validate () pour ce contrôle de bouton et toujours poster?

L'exemple "Acheter et vendre une maison" à l'adresse http://jquery.bassistance.de/validate / demo / multipart / permet de le faire pour retrouver les 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 de méthodes personnalisées en dupliquant déjà les fonctionnalités du plug-in de validation.

Ce qui suit est une version abrégée du script immédiatement applicable 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'
}); 

Answer 1

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

.

exemple

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

Consultez la documentation de jQuery Validator sur cette fonctionnalité ici: Ignorer la validation lors de l'envoi

MODIFIER :

La technique ci-dessus est obsolète et remplacée par l'attribut formnovalidate .

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

Answer 2

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

Answer 3

Encore une autre manière (dynamique):

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

Et pour le réactiver, nous venons de rétablir la valeur par défaut:

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

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

Answer 4

Ajouter l'attribut formnovalidate à l'entrée

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

Ajout de class = " annuler " est maintenant obsolète

Voir les documents pour ignorer la validation lors de l'envoi sur ce lien

Answer 5

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

Vous pouvez appeler ce modèle le modèle d'adhésion 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 à résoudre mais une fois que vous les avez résolus, l'expérience utilisateur est très bonne.

Answer 6

(Extension des @lepe et du @redsquare pour ASP.NET MVC + jquery.validate.unobtrusive. js )

Le plugin de validation jquery (et non celui de Microsoft discret) vous permet de mettre un .cancel sur votre bouton d'envoi pour ignorer 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 type = 'reset' qui est quelque chose de complètement différent)

Malheureusement, le traitement de la validation jquery.validation.unobtrusive.js (ASP.NET MVC) a un peu gâché le Le comportement par défaut du plug-in jquery.validate .

C’est ce que j’ai proposé pour vous permettre de mettre .cancel sur le bouton de soumission, comme indiqué ci-dessus. Si jamais "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 effectuer de tournée 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 un autre moyen. Cela permet simplement au formulaire d'être soumis côté client sans erreur (l'alternative serait d'ajouter des attributs .ignore à tout ce qui se trouve dans votre formulaire). .

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

Answer 7

Cette question est ancienne, mais j'ai trouvé une autre solution. Elle utilise $ ('# formId') [0] .submit () , qui récupère l'élément dom à la place de l'objet jQuery. , évitant ainsi les crochets de validation. Ce bouton envoie le formulaire parent contenant l’entrée.

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

Assurez-vous également que vous n'avez pas de entrée nommé "submit", ou qu'il remplace la fonction nommée submit .

Answer 8

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

event.preventDefault():

E.g. si au lieu de soumettre je veux 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 souhaite modifier 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 ignorez la validation.

Answer 9

J'ai deux boutons pour la soumission de formulaire, un 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();
});

Answer 10

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

Ou

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

Mais sans succès dans un validateur requis personnalisé. Pour appeler une soumission dynamiquement, j'ai créé un faux bouton de soumission masqué avec le code suivant:

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, ignorez la validation correctement:)

Answer 11

Voici la version la plus simple, espérons que cela aidera quelqu'un,

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