web-dev-qa-db-fra.com

Ajout de règles de validation jQuery aux éléments créés dynamiquement dans ASP

J'ai des champs de formulaire insérés dynamiquement sur une page d'un projet MVC3. Normalement, nous ajoutons le côté serveur de validation jQuery, mais dans ce cas, nous ne pouvons pas (plusieurs champs dans l'interface utilisateur génèrent la valeur d'un champ masqué - et c'est ce qui est soumis. Nous ne pouvons pas valider par rapport à un champ masqué, nous devons donc plutôt ajouter une validation d'interface utilisateur uniquement pour les champs que l'utilisateur peut voir)

Une fois les champs ajoutés dynamiquement à la page, j'exécute le code suivant sur le conteneur:

$container.find(".date").rules("add", {
    required: true,
    messages: {
        required: "The date is required"
    }
});

Mais ça ne marche pas! Curieusement, la désactivation du code ci-dessus, la création des éléments dynamiques, puis l'exécution du code dans la console JS du navigateur fonctionnent, mais seul le message de validation par défaut s'affiche.

Je suis à perte. Des idées?

J'utilise jQuery Validation 1.9.0 et le plugin discret

jqueryasp.netjquery-validateunobtrusive-validation
28
CBarr

Maintenant que je comprends ce qui se passe avec le plugin discret (ce qui, je crois, est lié à ASP.NET), voici ce que vous devez faire:

Après avoir ajouté votre nouvel élément, appelez $.validator.unobtrusive.parseElement(newElement) et il sera ajouté au formulaire. Comme votre réponse l'a suggéré, vous devez définir les attributs data-val et data-val-required dans le nouvel élément de formulaire.

Vous vous retrouvez donc avec ceci:

//create new form element
$('form fieldset').append('<br>New Field: '+
     '<input type="text" data-val="true" data-val-required="A date is required." name="newField">'+
     ' * Also required');

//add new rules to it
$.validator.unobtrusive
  .parseElement($('form').find('input[name="newField"]').get(0));

Montré ici: http://jsfiddle.net/ryleyb/LNjtd/2/

8
Ryley

Il s'avère que cela peut être fait principalement en HTML en ajoutant quelques attributs à chaque élément du formulaire:

  • Un attribut name
  • data-val="true"
  • data-val-required="message"

Ainsi:

<input type='text' name="date" data-val="true" data-val-required="A date is required." />

Ensuite, le formulaire doit simplement être ré-analysé via JS:

//Remove current form validation information
$("form")
    .removeData("validator")
    .removeData("unobtrusiveValidation");

//Parse the form again
$.validator
    .unobtrusive
    .parse("form");
62
CBarr

Je pense que vous aviez quelque chose de plus simple - comme si votre find('.date') ne trouvait rien. Parce que sinon, votre code me semble tout à fait raisonnable. Voici un exemple de fonctionnement comme prévu: http://jsfiddle.net/ryleyb/LNjtd/

J'ai pu valider le code correctement avec ceci:

$('form fieldset')
    .append('<br>New Field: <input type="text" name="newField"> * Also required')
    .find('input[name="newField"]').rules('add', {
      required: true,
      messages: {
        required: 'New field is required'
      }
    }
);​
1
Ryley