web-dev-qa-db-fra.com

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

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 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 comme une "recommandation": en d'autres termes, lorsque le formulaire est soumis, la validation est déclenchée mais au lieu d'un message "obligatoire", une "recommandation" indique que le message "vous-même" apparaît. manqué les champs suivants ... voulez-vous continuer quand même? " À 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" sur http://jquery.bassistance.de/validate/demo/multipart/ permet de le faire pour afficher 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 des méthodes personnalisées en dupliquant déjà la fonctionnalité déjà dans le plugin 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'
});
jqueryjquery-validate
155
Ted

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

par exemple

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

Voir 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" />
270
redsquare

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

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

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

99
lepe

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#issuecomment-17601443

14
Daniel Garcia

Ajouter l'attribut formnovalidate à l'entrée

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

Ajouter class = "cancel" est maintenant déconseillé

Voir la documentation pour ignorer la validation lors de l'envoi sur ce link

13
TastyCode

Vous pouvez utiliser l'option onsubmit: false (voir documentation ) lors du câblage d'une validation qui ne sera pas validée lors de la soumission du formulaire. Et ensuite, dans votre asp: button ajoutez un OnClientClick = $ ('# aspnetForm'). Valid (); 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.

Notez que 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.

10
BrokeMyLegBiking

(Extension de @lepe 's et @redsquare answer pour ASP.NET MVC + jquery.validate.unobtrusive.js)

Le plug-in de validation jquery (et non celui de Microsoft discret) vous permet de placer une classe .cancel sur votre bouton d'envoi afin de 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 ceci avec type='reset' qui est quelque chose de complètement différent)

Malheureusement, le code de manipulation de la validation jquery.validation.unobtrusive.js (ASP.NET MVC) a un peu pour effet de bloquer le comportement par défaut du plug-in jquery.validate .

C’est ce que j’ai proposé pour vous permettre de placer .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, cela semble ne pas fonctionner - assurez-vous de ne pas effectuer de va-et-vient sur le serveur et de voir une page générée par le serveur avec des erreurs. Vous aurez besoin de 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 les attributs .ignore à tout le contenu de votre formulaire).

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

3
Simon_Weaver

Cette question est ancienne, mais j’ai trouvé une autre solution. Elle utilise $('#formId')[0].submit(), qui récupère l’élément dom au lieu de l’objet jQuery, en contournant ainsi tous les points de validation. Ce bouton soumet 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 variable input nommée "submit", sinon elle remplace la fonction nommée submit.

1
bradlis7
$("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 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, ignorez la validation correctement :)

1
Davide Ciarmiello

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

event.preventDefault():

Par exemple. 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 contournez la validation.

1
Scott Mayers

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

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