web-dev-qa-db-fra.com

erreur du plug-in de validation jQuery: TypeError: le validateur n'est pas défini

Voici le code html pour le formulaire:

<form method="post" id="login" action="/login">
 <div class="login-element">
    <label for="email">E-Mail</label>
    <input type="text" name="email">
</div>
<div class="login-element">
    <label for="password">Passwort</label>
    <input type="password"  name="password">
</div>
<div class="login-element">
    <input type="submit" value="Login">
</div>
</form>

et voici le code que j'ai utilisé pour la validation:

    $(document).ready(function() { 
    $("#login").validate({
       debug: true,
       rules: {
            email: {
              required: true,
              email: true
            },
            password: {
              required: true
            }
        },
        messages: {
            email: {
                required: "Please enter a email adress",
                email: "Please enter a valid email address"
            },
            password:"Please enter password"
        }
    });
    });

Dans la console, l'erreur suivante est enregistrée: 

TypeError: validator is undefined
...or.settings[eventType] && validator.settings[eventType].call(validator, this[0],...

Quel pourrait être le problème ici?

jqueryjquery-validate
19
Damir Mitrovic

Cette erreur est survenue parce que j'avais un autre élément html avec le même identifiant .

21
Damir Mitrovic

Vous devez inclure le script de validation dans l'en-tête de votre document.

Comme ça:

<script src="/js/libs/jquery.validate.js" type="text/javascript"></script>

Vérifiez également dans le code HTML rendu que votre ID de formulaire est correct.

J'utilise ce code pour appeler valider sur mes sites

        //Validate Form
        var ids = [];
        $("form").each(function () {
            ids.Push(this.id);
        });
        var formId = "#" + ids[0]
        $(formId).validate();
8
Andrew Walters

Pour ceux qui cherchent encore une réponse, les réponses ci-dessus ne fonctionnent pas.

J'ai passé les 3 dernières heures à essayer toute la solution et aucune d'entre elles n'a fonctionné. 

J'ai finalement réalisé une erreur très stupide, j'avais initialisé Jquery deux fois dans mon application 

une fois dans la tête où j'avais inclus 3 scripts 

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

et encore une fois à la fin de la page où je n'avais que la ligne.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

Cela réinitialisait la fonction de validation de $ et provoquait la rupture de tout.

Certaines choses à vérifier pour les cas où les validations ne sont pas déclenchées.

  1. Le script est-il dans le bon ordre? jquery suivi de validate suivi de discret.

  2. La fonction $ .validator est-elle définie? Vérifiez rapidement dans la console du navigateur 

  3. Le formulaire à valider est-il créé de manière dynamique? Si tel est le cas, vous devrez peut-être ré-initialiser le plug-in validateur sur le formulaire. La meilleure façon de le faire est mentionnée ci-dessous. Choisissez celle qui vous convient le mieux.

    $.validator.unobstrusive.parse('#myForm')

ou

 $('#myForm').validate() // this just makes the validator plugin consider the form for unobstrusive validation

ou 

$('#myForm').valid() // this will trigger unobstrusive validation on the form.
  1. Si vous avez compliqué les chargements ajax pour de nombreux formulaires, assurez-vous que les scripts ne sont pas inclus à maintes reprises dans chaque page ajax, assurez-vous également que les éléments de la page principale ont toujours des noms uniques.

J'espère que cela t'aides.

8
Pratik

Le même problème est apparu pour moi. La raison de cette erreur est que j'utilisais le code:

if ($("#invalidFormId").valid()) {
....
}

Et la id de l'élément form n'était pas valide

2
MaVRoSCy

Dans mon cas, le problème est venu d'avoir deux versions d'instance de Jquery UI i JQuery. Cela fait que le code normal de Jquery fonctionne correctement mais supprime l’instance de $ .validator.

1
Xemadk

J'avais @Scripts.Render("~/bundles/jquery") dans la vue parent (_Layout.cshtml) et j'avais également défini d'autres balises de script jquery dans une autre vue, elles se sont heurtées.

1
StackExchanger

Comme il s’agit du premier sujet que Google indique pour "validateur n’est pas défini", je vais décrire mon problème résolu. Peut-être que quelqu'un le trouvera utile. 

J'utilisais l'attribut 'maxlength' (rien d'extraordinaire) et j'ai eu cette erreur. La raison était des formes imbriquées. L'un des textes était à l'intérieur des deux formes. Cela peut arriver lorsque vous avez des modaux (boîtes de dialogue) avec des formulaires dans la vue principale.

1
Marcin Bigoraj

Dans mon cas, l'erreur était due au fait que le validateur avait été appelé trop tôt. J'ai déplacé le code vers une fonction distincte et je l'ai appelé en utilisant la méthode delay de underscore.js. Travaillé comme un charme.

_.delay(doValidations);

function doValidations() {
...
});
1
Sreejith K.

Dans mon cas, j'appelais $.validator avant $(document).ready. Une fois que je l'ai déplacé vers une fonction appelée depuis ready, cela a fonctionné. Cela fonctionnera après ou pendant ready mais pas avant.

0
toddmo

La même chose s'est produite ici. Pour moi, c'était une faute de frappe dans mon code:

$(document).ready(function(){
    //START of validate
$('#reply').validate({
    rules:{
        message:{
            required: true,
            },  
        },
    submitHandler: function(form) {
        var data = $("#reply").serialize();
        $.ajax({
            type:"POST",
            url:"ajax/scripts/msg_crt.php",
            data:data,
            success:function(data){
                alert("Loaded");
                }
            });
        }
    });
    //END of validate
  });

$(document).on('click','#send', function(){
    if($('#replay').valid()){// <--- Here is my selector typo
        $("#replay").submit(); // <--- Here is my selector typo
        }
        return false;
    });
0
Rust

Le plugin est livré dans des bibliothèques séparées, vous devez les inclure dans votre code HTML.

<script src="../jquery-validation/dist/jquery-validate.min.js"></script>
<script src="../jquery-validation/dist/additional-methods.min.js"></script>
0
mariofertc

Ce problème se produisait pour moi lors de l'appel de validator.destroy () - l'erreur se produisait dans la méthode staticRules du plug-in. La cause s'est avérée être l'élément de formulaire associé (element.form) a été détaché du DOM. Je l'ai résolu en vérifiant que l'élément était dans le DOM avant d'appeler destroy, en utilisant la méthode suivante:

document.contains(element)

Espérons que cela aide quelqu'un.

0
James Hill