Activation de bouton désactivé après le succès de jQuery de validation
J'ai le code suivant où j'ai 2 saisie de courrier électronique champs dont j'ai besoin pour valider ce sont les mêmes qui travaille avec succès à l'aide de jQuery valider equalTo.
<div class="control-group">
<label class="control-label" for="inputEmail"><strong>Email Address</strong></label>
<div class="controls">
<input type="email" name="inputEmail" placeholder="[email protected]" id="inputEmail" required>
</div>
<label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong></label>
<div class="controls">
<input type="email" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" required>
</div>
</div>
<button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout » </button>
Lors de la validation, je souhaite activer le bouton, mais n'arrive pas à comprendre comment faire cela.
$('#ccSelectForm').validate({
rules: {
inputEmail: {
required: true,
email: true
},
inputEmailConfirm: {
required: true,
email: true,
equalTo: '#inputEmail'
},
}
});
Idéalement en tant que bonus, je voudrais définir les contrôles de formulaire à utiliser les états de validation dans Bootstrap3, détaillé ici - http://getbootstrap.com/css/#forms-control-validation
Violon est ici http://jsfiddle.net/4wU5m/
OriginalL'auteur LJT | 2014-02-22
Vous devez vous connecter pour publier un commentaire.
Il n'y a pas de jQuery Valider plugin option de rappel/fonction qui se déclenche lorsque tous les champs sont valides sans d'abord cliquer sur le bouton soumettre.
Vous aurez besoin de créer un
keyup blur
gestionnaire d'événement qui vérifie votre forme pour la validité et active/désactive le bouton en conséquence; chaque fois qu'une touche est enfoncée ou vous laissez un champ.DÉMO: http://jsfiddle.net/p628Y/1/
Depuis le jQuery Valider désactive le plugin du navigateur de validation HTML5 dynamiquement, j'ai enlevé le
required
attribut de votre balisage et changétype="email"
entype="text"
. (Vous avez déjà ces règles de validation spécifié dans le plugin.)Vous n'avez pas besoin de spécifier toutes les règles deux fois lors de l'utilisation de la
equalTo
la règle que le deuxième champ doit toujours correspondre à la première.EDIT:
Dans le scénario ci-dessus, votre page est totalement dépendant de JavaScript. En d'autres termes, sans JavaScript, le bouton est toujours désactivé.
Si vous avez une validation côté serveur est en place et souhaitez que votre page d'être indépendant de JavaScript, vous aurez besoin de retirer le
disabled="disabled"
de votre bouton de balisage et de l'ajouter à votre code JavaScript à l'intérieur des DOM prêt de gestionnaire d'événements.Dans ce scénario, sans JavaScript, vous aurez toujours un travail de bouton, et avec le JavaScript, le bouton est désactivé par programmation au chargement de la page.
Merci. Je suis sous Firefox et mon démo est aussi travailler avec contextuel de la pâte et de la saisie semi-automatique. Cependant, j'ai ajouté le
blur
événement juste pour être certain.Bienvenue sir maintenant, c'est parfait. Je suis en utilisant google Chrome .
C'est génial, merci. La seule chose est que j'ai quitté le HTML5
type="email"
que si Javascript est désactivé comme mentionné dans votre edit, j'ai encore la validation de certains qui se passe, même si je ne suis pas sûr de l'impact d'avoir les deux, mais il semble fonctionner.il a gagné pas mal d'avoir la validation HTML5 en place avec jQuery Valider. Comme je l'ai dit, le plugin va silencieusement désactiver la validation HTML5. Cependant, le plugin ne prend pas en charge toutes les entrées HTML5
type
attributs, maistype="email"
est très bien.OriginalL'auteur Sparky