web-dev-qa-db-fra.com

JQuery.Validate ajouter des règles dynamiques avec des messages

J'ai un formulaire sur lequel j'utilise jquery.validate. J'appelle initialement valider avec un ensemble de règles et de messages personnalisés ...

$("#formName").validate( {
  rules: {
    myExistingInput: {
      required: true
    }
  },
  messages: {
    myExistingInput: {
      required: "Enter something"
    }
  },
  ignore: null, // include hidden fields (see below)
  submitHandler: function(form) {
    // do stuff
  },
  invalidHandler: function(event, validator) {
    // do stuff (some of the fields may have been hidden by a collapsible panel
    // if there is an error on one of those fields, expand the panel so the error
    // becomes visible)
  }
});

Plus tard, j'ajoute dynamiquement des champs au formulaire, ainsi que des règles pour ces champs aussi ...

$("#formName").append(...);

$("#newInputName").rules("add", {
  required: true,
  messages: {
    required: "Enter something else"
  }
});

Si je soumets ensuite le formulaire, une erreur se produit dans jquery.validate ...

Une exception s'est produite lors de la vérification de l'élément newInputName, cochez la case 'messages' method.TypeError: Impossible d'obtenir la propriété 'call' de référence non définie ou nulle

Lors du débogage dans le navigateur, je vois que l’erreur est renvoyée de la fonction "check" et que la variable "method" est définie sur "messages".

Si je supprime les messages de l'appel aux règles ("add", ...

$("#newInputName").rules("add", {
  required: true
});

cela fonctionne comme prévu, mais évidemment, je n'ai maintenant aucun message d'erreur personnalisé. 

J'ai vu de nombreux exemples ici sur SO indiquant que ma syntaxe est correcte. Aucune suggestion?

BTW: plug-in de validation jQuery - v1.11.0 - 2/4/2013

jqueryjquery-mobilejquery-validate
17
Martin Robins

Votre code semble fonctionner, sans erreur, comme vous l'avez posté.

DEMO avec DOM ready: http://jsfiddle.net/UZTnE/

DEMO avec PageInit & jQuery Mobile: http://jsfiddle.net/xJ3E2/

$(document).on("pageinit", function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            }
        },
        messages: {
            field1: {
                required: "Enter something"
            }
        }
    });

    $('[name*="field"]').each(function () {
        $(this).rules('add', {
            required: true,
            messages: {
                required: "Enter something else"
            }
        });
    });

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

BTW:

ce...

ignore: null, // include hidden fields

devrait être...

ignore: [], // include hidden fields

Voir: jQuery Validate - Activer la validation pour les champs cachés

22
Sparky

$(document).ready(function(){
  $("#controlId").rules("add", {
     required : true,
     messages : { required : 'field is required.' }
  });
});

4
hardik prajapati