J'utilise JQuery Validate sur un formulaire JQuery Mobile qui a une vue de liste avec une option de saisie semi-automatique qui est créée dynamiquement.
Je reçois cette erreur si vous essayez de taper dans le champ de saisie automatique, une fois la validation active.
Je peux voir que le problème est lié au formulaire créé par jQuery Mobile pour contenir l'entrée du filtre, mais je ne peux pas comprendre comment empêcher jQuery Validate de valider le champ.
Je peux le reproduire en utilisant JS Fiddle
(Appuyez sur Valider puis tapez dans la zone de filtre)
Toutes suggestions appréciées
Merci
<body>
<script>
jQuery.validator.setDefaults({
ignore: '[data-type="search"]'
});
</script>
<form>
<input required>
<ul id="ac" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li><a href="#">Acura</a>
</li>
<li><a href="#">Audi</a>
</li>
</ul>
<button onclick="$('#ac').attr('data-role','listview');$('#ac').listview();$('form').validate();">Validate</button>
</form>
Tout votre problème est dû au code HTML dynamique créé par la fonction listview()
. L'inspection du DOM révèle que cela crée dynamiquement un nouveau <form>
récipient. Puisque vous avez placé listview
dans votre <form>
conteneur, vous avez maintenant <form></form>
imbriqué dans <form></form>
, qui est un code HTML très invalide, et la raison pour laquelle le plugin jQuery Validate fonctionne de manière inattendue.
La solution consiste à placer votre élément listview en dehors de votre <form>
récipient.