web-dev-qa-db-fra.com

validateur jQuery - Impossible d'appeler la méthode 'appel' d'erreur indéterminée - lors de l'ajout dynamique de la validation

Ceci est mon code pour mettre à jour la validation jQuery de manière dynamique. Dans le chargement de document, je crée la validation. Ce code est utilisé pour mettre à jour la validation du numéro de téléphone de manière dynamique. Après avoir appliqué cette validation, lorsque je saisis quelque chose dans la zone de texte du numéro de téléphone que j’obtiens, je ne peux pas appeler la méthode "appel" d’une erreur non définie.

 $("#phone").rules("remove");

$("#phone")
  .rules(
  "add",
  {
    required:true,
    minlength:5,
    maxlength:20,
    phoneUS:true,
    messages:{
    required: "Enter company phone number",
    minlength:"Phone number should contain a minimum of 5  characters",
    maxlength:"Phone number should contain a maximum of 20  characters",
    phoneUS:"Enter valid phone number"
  }

  });

Merci d'avance. Comment résoudre ceci?

jqueryjquery-validate
10
Anbu Raj

Il y a quatre problèmes potentiels.

1) Il vous manque une accolade de clôture pour la section messages.

$("#phone").rules("add", {
    required: true,
    phoneUS: true,
    messages: {
        required: "Enter company phone number",
        phoneUS: "Enter valid phone number"
    } //<-- this was missing 
});

DEMO: http://jsfiddle.net/A8HQU/2

2) Il y a un bogue connu où ajouter messages à l'aide de la méthode rules('add') interrompt le plugin et/ou la règle. Assurez-vous absolument que vous incluez jQuery Validate version 1.11.1 ou mieux.

3) La règle phoneUS nécessite l'inclusion de le fichier additional-methods.js .

4) La méthode rules('add') doit venir après la fonction d'initialisation .validate().

Note :

Vous utilisez la règle phoneUS, donc minlength et maxlength sont totalement superflus, car la règle phoneUS recherche déjà un format/une longueur précis.

23
Sparky

J'ai eu le même problème, mais avec une cause différente. Le même problème se produit lorsque je mets une règle "require: true" au lieu de "required: true".

Cette erreur se produit lorsque vous spécifiez dans vos règles une validation sans méthode correspondante. Lors du débogage, j'ai constaté que l'exception montre que j'ai spécifié une règle "require" par le nom de la méthode était "required". Il tente d'accéder à une méthode dans une table de hachage et tente .call () même si la méthode n'est pas trouvée, ce qui entraîne une exception.

Si l'auteur du plug-in a simplement lancé une erreur personnalisée dans ce cas, indiquant que "la règle 'require' n'a pas de méthode", il serait plus facile de déboguer et de reconnaître la faute de frappe.

C’est aussi la même cause du problème infâme avec la soumission du plugin, même si les champs ne sont pas valides. Voir et voter pour mon compte-rendu - https://github.com/jzaefferer/jquery-validation/issues/1212

9
Josh Ribakoff

En tant que bogue associé, si vous ajoutez une règle personnalisée, utilisez:

$.validator.addMethod('field-is-valid', function (val, element) { ...})

mais faites ensuite référence à cela dans votre déclaration de règles avec le mauvais nom:

$(element).rules('add', {
    "field-valid": true
})

vous obtiendrez le même Cannot call method call of undefined. 

7
tobylaroni

Je suis tombé sur un problème similaire deux fois récemment et j'ai passé beaucoup de temps à essayer de le résoudre. Je vais donc laisser ici une solution simple. Et si le modérateur pense que ce n'est pas le bon endroit, faites-le moi savoir.

L'erreur se produit lors de l'exécution de cet exemple de code:

$(document).ready(function () {

    $.validator.addMethod("numberEqualTo", function (value, element, parameter) {
        return parseInt(value) === parseInt(parameter);
    }, "Values must match");

    $("#example2").validate({
        focusInvalid: false,
        onkeyup: true,
        onfocusout: true,
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.appendTo("div#errors");
        },
        rules: {
            "example2-fullname": {
                required: true,
                minlength: 5
            },
            "example2-phone": {
                required: true,
                number: true
            },
            "example2-Zip": {
                required: true,
                number: true,
                rangelength: [3, 5]
            },
            "example2-value": {
                required: true,
                number: true,
                numberEqualTo: 10
            }
        },
        messages: {
            "example2-fullname": {
                required: "You must enter your full name",
                minlength: "First name must be at least 5 characters long"
            },
            "example2-phone": {
                required: "You must enter your phone number",
                number: "Phone number must contain digits only"
            },
            "example2-Zip": {
                required: "You must enter your Zip code",
                number: "Zip code must contain digits only",
                rangelength: "Zip code must have between 3 to 5 digits"
            },
            "example2-value": {
                required: "You must enter your value",
                number: "Value must be a digit",
                numberEqualTo: "Value must be equal to 10"
            }
        }
    });
});

Pourquoi? Pour une raison quelconque, si vous spécifiez explicitement:

onkeyup: true,
onfocusout: true,

programme lancera l'exception mentionnée. C'est le cas lorsque vous définissez TOUT ou LES DEUX options ci-dessus sur 'true'. D'autre part, si vous définissez BOTH sur 'false' ou sur UN sur 'false' et supprimez l'autre, le système fonctionnera comme prévu.

La chose la plus importante: si vous supprimez ou commentez l’une de ces options, celle que vous avez supprimée sera définie par défaut, ce qui est "vrai" ET GAGNE "toute erreur. Il est donc possible de personnaliser le plugin de validation de la même manière. vous voulez, vous devez juste vous rappeler de ne pas définir explicitement ces options sur 'true'.

J'espère que cela aidera quelqu'un, malgré le fait que le problème de cette question pour cet utilisateur particulier a déjà été résolu.

1
rvnlord

Le code ci-dessus ne fonctionnera pas car il manque } après la liste des propriétés. 

0
karthick