L'ajout de jQuery programme de validation des règles de créer dynamiquement des éléments ASP

J'ai quelques insérés dynamiquement des champs de formulaire sur une page dans une MVC3 projet. Normalement, nous aurions ajouter jQuery validation côté serveur, mais dans ce cas, nous ne pouvons pas (plusieurs champs dans l'INTERFACE utilisateur de générer de la valeur pour un champ caché - et c'est ce qui est présenté. Nous ne pouvons pas valider à l'encontre d'un champ caché, de sorte que nous devons, au contraire, ajouter de l'INTERFACE utilisateur, seule la validation pour les champs que l'utilisateur peut voir)

Une fois que les champs sont 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 il ne fonctionne pas! Curieusement, en désactivant le code ci-dessus, la création de la dynamique des éléments, puis en exécutant le code dans le navigateur JS console fonctionne, mais uniquement la valeur par défaut message de validation de la montre.

Je suis à une perte. Des idées?

Je suis à l'aide de jQuery Validation 1.9.0 & la discrète plugin

InformationsquelleAutor Chris Barr | 2012-02-21

8

Maintenant que je comprends ce qui se passe avec la Discrète plugin côté des choses (ce que je comprends est liée à ASP.NET d'une certaine manière), voici ce que vous devez faire:

Après l'ajout de votre nouvel élément, appel $.validator.unobtrusive.parseElement(newElement) et il sera ajouté à la forme. En tant que votre réponse proposée, vous devez définir les données-val et des données-val-attributs requis dans la nouvelle forme de l'élément.

Donc vous retrouver 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/
- Ah, bon! Je risque de faire une méthode personnalisée pour ce faire et ajouter les attributs de données sur le champ sélectionné à la fois.
- Même dans le JSFiddle il ne fonctionne pas.
InformationsquelleAutor Ryley
59

Comme il s'avère, ce qui peut être fait principalement en HTML en ajoutant un peu d'attributs pour chaque élément de formulaire:
- Un name attribut
- data-val="true"
- data-val-required="message"
Comme suit:
```
<input type='text' name="date" data-val="true" data-val-required="A date is required." />
```
Alors la forme a juste besoin d'être ré-analysée via JS:
```
//Remove current form validation information
$("form")
    .removeData("validator")
    .removeData("unobtrusiveValidation");

//Parse the form again
$.validator
    .unobtrusive
    .parse("form");
```
- 5.5 ans plus tard, fonctionne toujours comme un champion lors de l'injection de nouvelles vues partielles dans un éditeur d'interface.
- Ne pas la dernière ligne être $.validator.unobtrusive.parse($("form")); ?
- non, il n'y a pas besoin de le faire, le parse fonction s'attend à un sélecteur CSS chaîne de caractères passée en là, mais il y a aussi pas mal en passant dans un objet jQuery soit. Ce n'est pas pas nécessaire.
- Une meilleure solution que l'on a accepté la réponse.
- Donc ici, je suis 7 ans plus tard, et heureux que l'on puisse encore trouver cela utile... mais aussi un peu triste que les gens ont encore à utiliser jQuery de validation à tous 🙁
InformationsquelleAutor Chris Barr
1

Je pense que vous avez eu quelque chose de plus simple mal - comme votre find('.date') n'a pas fait de trouver quoi que ce soit. Parce que sinon, ton code semble tout à fait raisonnable pour moi. Voici un exemple de ce qu'il fonctionne comme prévu: http://jsfiddle.net/ryleyb/LNjtd/

J'ai été en mesure de valider le code correctement avec cette:
```
$('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'
      }
    }
);
```
- Vrai, mais vous n'avez pas l'ajout d'une référence à la Discrète Validation plugin - ce qui semble être l'origine. J'ai mis à jour pour inclure ceci: jsfiddle.net/LNjtd/1
- Hein, non seulement cela, je vous ai envoyé le lien à la mauvaise jsfiddle 🙂
- Mais aussi, je n'ai pas l'attraper sur le fait que le discret plugin était lié, et je ne sais rien à propos de la façon dont ASP.NET génère ses formes et les utilise... donc oui, vous êtes sur votre propre, et il semble que vous avez trouvé une solution viable.
InformationsquelleAutor Ryley

Vous devez vous connecter pour publier un commentaire.