comment vérifier si un formulaire est valide par programme à l'aide du plug-in de validation jQuery

93

J'ai un formulaire avec quelques boutons et j'utilise jQuery Validation Plugin de http://jquery.bassistance.de/validate/ . Je veux juste savoir s'il existe un moyen de vérifier si le formulaire est considéré comme valide par le plugin de validation jquery de n'importe où dans mon code javascript.

Jaime Hablutzel
la source
2
Pour ceux qui souhaitent utiliser HTML5 et vanilla JS (pas de jQuery): stackoverflow.com/questions/12470622/…
2540625

Réponses:

142

Utilisation à .valid()partir du plugin jQuery Validation:

$("#form_id").valid();

Vérifie si le formulaire sélectionné est valide ou si tous les éléments sélectionnés sont valides. validate () doit être appelé sur le formulaire avant de le vérifier en utilisant cette méthode.

Où le formulaire avec id='form_id'est un formulaire qui l'a déjà fait .validate()appel.

Andrew Whitaker
la source
Merci, je faisais déjà quelque chose comme: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Merci
Jaime Hablutzel
@jaime: Pas de problème, heureux d'aider:)
Andrew Whitaker
Il n'est en fait pas nécessaire d'exécuter .validate () d'abord sur le formulaire. Vous pouvez simplement faire if (form.valid ()) {} et cela fonctionnera, où «form» est l'élément de formulaire que vous ciblez.
Gareth Daine
11
TypeError: $ ("# myForm"). Valid () n'est pas une fonction.
artgrohe
2
Si vous recevez un, TypeError valid() not a functionajoutez le plugin à votre fichier car c'est un plugin non inclus dans la bibliothèque jquery, par exemple. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd le
33

Réponse de 2015: nous l'avons prêt à l'emploi sur les navigateurs modernes, utilisez simplement l' API HTML5 CheckValidity de jQuery. J'ai également créé un module de validité jquery-html5 pour ce faire:

npm install jquery-html5-validity

Ensuite:

var $ = require('jquery')
require("jquery-html5-validity")($);

alors vous pouvez exécuter:

$('.some-class').isValid()

true
Mikemaccana
la source
1
pouvons-nous l'appeler sous forme entière et non sur chaque élément?
parisssss le
1
Génial! juste ce que je cherchais
Fester
Je préfère cela à la validfonction car il n'appelle pas la validatefonction et ne valide pas votre formulaire.
KevinAdu
@parisssss Fait un module pour le faire sur plusieurs sélections comme demandé.
mikemaccana le
19

La réponse @mikemaccana est utile.

Et j'ai également utilisé https://github.com/ryanseddon/H5F . Trouvé sur http://microjs.com . C'est une sorte de polyfill et vous pouvez l'utiliser comme suit (jQuery est utilisé dans l'exemple):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}
antongorodezkiy
la source
celui-ci est meilleur car il ne déclenche pas la validation du formulaire
Bishoy Hanna
Travaillez avec l'attribut de modèle. Merci.
MJ Vakili le
4

iContribute: il n'est jamais trop tard pour une bonne réponse.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

De cette façon, la validation HTML5 de base pour les champs «obligatoires» a lieu sans interférer avec la soumission standard en utilisant les valeurs «nom» du formulaire.

juan.benavides
la source
Notez que :inputet les :visiblesélecteurs sont des extensions jQuery et ne font pas partie de CSS. Voir les détails dans la documentation
Geradlus_RU
3
Un formulaire peut également être invalide en raison de la correspondance de motif et non seulement parce que manquant champs obligatoires
frank
4

Pour un groupe d'entrées, vous pouvez utiliser une version améliorée basée sur la réponse de @ mikemaccana

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

vous pouvez maintenant l'utiliser pour vérifier si le formulaire est valide:

if(!$(".form-control").isValid){
    return;
}

Vous pouvez utiliser la même technique pour obtenir tous les messages d'erreur:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}
Matias Medina
la source
J'ai créé un plugin jQuery pour faire le .each () pour vous.
mikemaccana le
1

Pour Magento, vous vérifiez la validation du formulaire par quelque chose comme ci-dessous.

Vous pouvez essayer ceci:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

J'espère que cela peut vous aider!

Kazim Noorani
la source