J'ai les JS et HTML suivants:
<form id = "html5form"></form> <input form = "html5form" type = "text" name = "html5required" required maxlength = "200"> <input form = "html5form" id = "html5submit" type = "submit">
3 Réponses :
Je ne suis pas tout à fait sûr comme ce que vous essayez de réaliser. Mais vous pouvez ajouter une fonction dans la validate de jQuery si le formulaire n'est pas correct, appelé invalidhandler, voir ici:
$(document).ready(function(){
$('#html5form').validate({
rules : { html5required: { required: true}
},
invalidHandler: function(event, validator) {
// Make ajax call here
$.ajax();
},
submitHandler: function(e) {
$.post({
//My AJAX here works just fine
});
};
});
}
Non Non, je n'essaie pas de faire un invalidehandler , mais merci pour les informations supplémentaires. Je veux simplement que mon entrée à donner un événement non valide indiquant que "Ce champ ne peut pas être vide" (comme lorsque vous souhaitez enregistrer un compte Gmail et que vous quittiez votre prénom). C'est mon problème ici . Même lorsque mon entrée est vide, je peux toujours Soumettre le formulaire et l'appel AJAX de la submithandler exécute .
En outre, pourquoi ai-je besoin $ (document.Ready (fonction (fonction () {}); pour envelopper ma validation? N'est-il pas correct de ne pas l'envelopper dans cela?
@WealthyPlayer, lire tous mes commentaires sur cette page et lire La page wiki . La méthode .validate () est utilisée pour l'initialisation du plug-in sur votre formulaire une fois la page chargée de la page. Le gestionnaire prêt au document garantit que le HTML est entièrement chargé avant que le plugin soit initialisé. Vous n'avez pas besoin de gestionnaire Cliquez sur car l'événement de clic est déjà capturé automatiquement par le plugin.
La meilleure réponse serait une combinaison des deux premières réponses sur cette page. Celui-ci manquait les entrées en dehors du conteneur de formulaire et l'autre réponse a manqué le retrait du gestionnaire.
Je suis désolé pour la réaction tardive, mais si vous souhaitez placer l'erreur sur un lieu personnalisé, utilisez la méthode de l'écriture d'erreur. J'ai récemment fait une émission de validation de JQuery générique Valider, voir ici: jsfiddle.net/ec6azns4/2 . Dans cet exemple, la classe pour l'erreur et le texte sont donnés à l'entrée en tant qu'attribut.
Vous avez manqué tout le point. Le code de l'OP est cassé simplement parce qu'ils n'ont pas mis l'entrée à l'intérieur du
@Sparky merci. Vos commentaires ont été très utiles. Le poster comme une réponse serait certainement accepté :-d
L'ajout de l'attribut requis aux éléments de formulaire entraînera le navigateur "Validation" de l'entrée. Mais chaque fois qu'un utilisateur entre dans Dev Outils du navigateur, ils peuvent facilement supprimer cela. En utilisant le validateur, il est déjà plus sûr, mais pas impossible de contourner cette mesure de sécurité. Le seul moyen de valider est validant dans PHP, car l'utilisateur ne peut pas changer le code là-bas.
comme pour obtenir le validateur de travailler, Fixer ces choses qui le feront fonctionner: p>
Cela vous donnera le résultat suivant, ce qui fonctionnera et empêchera la soumission du formulaire lorsque de gauche est vide. p>
p>
<form id = "html5form"> <input form="html5form" type="text" name="html5required" maxlength="200"> <input form="html5form" id="html5submit" type="submit"> </form>
Merci pour la réponse! J'ai déjà validé mon entrée dans PHP. Je veux simplement montrer une notification si leurs intrants étaient invalides. Une dernière chose, est-il vraiment impossible d'utiliser JQuery Validator avec le type de formulaire ci-dessus (entrées non enfermées dans un formulaire)?
S'il est vraiment impossible de valider le formulaire sans encadrer les entrées dans le formulaire? Quelle autre méthode puis-je utiliser pour valider mon formulaire Ajax alors?
@WealthyPlayer Non, il est nécessaire d'entourer les étiquettes d'entrée avec une balise de formulaire. Ceci est requis par JQuery Validator
@WealthyPlayer Pour valider un formulaire créé de manière dynamique que vous devez mettre le .validate () après Le formulaire est créé.
Je suis désolé, mais qu'est-ce qu'un formulaire créé de manière dynamique?
@WealthyPlayer c'est votre formulaire Ajax
Supprimez le Cliquez sur HANDER. Il est totalement inutile et montre un manque total de compréhension sur la manière d'utiliser ce plugin. .validate () est la manière dont vous initialisez le formulaire ... alors le Cliquez sur est capturé automatiquement .
Un formulaire créé dynamiquement est une forme créée par ajax. Le formulaire de l'OP n'est pas créé de manière dynamique - il est chargé avec le HTML et soumis par Ajax.
@Sparky Vous avez totalement raison, complètement manqué cela. Cependant, ce n'est pas la cause du problème qui est interrogé sur la cause de la forme de la forme qui se soumett toujours est que vous devez envelopper les éléments d'entrée. Êtes-vous d'accord?
@Rickjelier Il semble que j'ai besoin d'envelopper les éléments d'entrée. Y a-t-il un moyen de les valider sans utiliser le plugin jQuery.validate () alors?
@WealthyPlayer Vous pouvez y parvenir en vérifiant manuellement la valeur de l'élément d'entrée lorsque OnCliquez sur le bouton Soumettre.
L'OP doit embeller tout entrée dans un
Et lisez mon commentaire sur le Cliquez sur HANDLER ... C'est inutile et cela pourrait éventuellement retarder la validation dans certains cas d'utilisation.
La meilleure réponse serait une combinaison des deux premières réponses sur cette page. Celui-ci a manqué le retrait du gestionnaire Click et l'autre réponse manquée des entrées étant en dehors du conteneur de formulaire.
Comme indiqué dans les commentaires, vous avez quelques problèmes ...
pour ce plugin fonctionner, toutes les éléments code> code> doivent se situer dans un La méthode Lorsque vous avez déjà déclaré Il y avait un point-virgule erroné Code de travail STRY>: P> JavaScript: p> .validate () code> est utilisée pour l'initialisation du plug-in sur votre formulaire et doit donc être appelée une fois sur la charge de la page plutôt que sur chaque Cliquez sur CODE>. un événement. Supprimer et remplacer le gestionnaire d'événements CODE> Cliquez sur CODE> Gestionnaire d'événements. P> LI>
requis code> dans les règles code> objet code> de .validate () code>, vous pouvez supprimer le fichier correspondant Attribut HTML5. Pour la cohérence, vous devez également supprimer l'attribut maxlength code> html5 et déclarer ceci dans la méthode .validate () code>. Lorsque vous utilisez ce plugin, toute la validation HTML5 est automatiquement désactivée. Si vous préférez déclarer toutes les règles via des attributs HTML5, vous devez les supprimer de .validate () code> et le plug-in enraille toujours en tant que règles valides. Ce n'est que mes meilleures pratiques suggérées comme ayant Différentes règles dans différents emplacements conduit à la confusion lors de la dépannage. P> li>
; code> à la fin de votre submithandler code> Fonction provoquant une erreur de syntaxe. P> li>
ol> <form id="html5form">
<input form="html5form" type="text" name="html5required">
<input form="html5form" id="html5submit" type="submit">
</form>
Qu'est-ce que vous essayez exactement d'atteindre? Votre question est très peu claire. Que doit faire HTML5 avec quoi que ce soit? De plus, vous ne devriez pas avoir
.validate () ci-joint dans unCliquez sur la fonction gestionnaire..validate () est uniquement utilisé pour initialiser le formulaire.@Sparky je vois, ça a du sens. J'essaie simplement de voir si mon champ de saisie est vide ou non avant d'appeler ma fonction Ajax. Cependant, mon code ci-dessus ne fonctionne pas (il ne validait pas le champ de saisie).
@Sparky j'ai mentionné le formulaire HTML5 parce que je pense que cela pourrait en quelque sorte interférer avec le validateur JQuery, car les formulaires typiques ont leurs entrées à l'intérieur desdites formes. Comme mentionné dans une réponse ci-dessous, les entrées séparées interfèrent avec JQuery Validator, confirmant ma suspicion. Néanmoins, j'ai demandé une fois de plus à reconfirmer car j'aimerais vraiment utiliser le type de formulaire ci-dessus (pour les implémentations d'onglets).
@Sparky s'il vous plaît faites-moi me guider pour poser des questions claires car je veux aussi être claire afin que d'autres puissent m'aider.
Pour l'utilisation de base, lisez la page wiki pour ce plugin: Stackoverflow.com/tags/jquery-validate/info
@Sparky Wow! Ce lien est totalement bon. Merci. Existe-t-il une sorte de référentiel pour les liens (guides concis) comme celui que vous avez donné? Cela me sauvera certainement dans de nombreuses situations.
C'est juste le lien "En savoir plus" du JQuery-Validate tag.
Pour que ce plugin fonctionne, Vous devez Placez votre référence Eléments d'entrée dans le Conteneur. Cela n'a absolument aucun sens pourquoi vous ne le feriez pas déjà.