web-dev-qa-db-fra.com

validation du formulaire jQuery en cliquant sur un bouton

J'ai une simple page avec un formulaire et un bouton en dehors du formulaire. J'essaie de valider le formulaire en cliquant sur le bouton .. J'ai ajouté les règles de validation du formulaire sur la fonction document.onready Cependant, le formulaire n'est pas validé. 

HTML: -

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS: -

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },
   messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

Une idée de ce qui ne va pas?

jqueryjquery-validate
39
ajithmanmu

Dans votre gestionnaire click, l'erreur est la méthode .validate(); il initialise uniquement le plugin, il ne valide pas la form.

Pour éliminer le besoin d'avoir un bouton submit dans la form, utilisez .valid() pour déclencher une vérification de validation ...

$('#btn').on('click', function() {
    $("#form1").valid();
});

jsFiddle Demo

.validate() - pour initialiser le plugin (avec options) une fois sur DOM ready.

.valid() - pour vérifier l'état de validation (valeur booléenne) ou pour déclencher un test de validation sur la form à tout moment.

Sinon, si vous aviez un bouton type="submit" dans le conteneur form, vous n’auriez pas besoin d’un gestionnaire click spécial ni de la méthode .valid(), car le plug-in le capturerait automatiquement.

Démo sans click gestionnaire

MODIFIER:

Vous avez également deux problèmes dans votre code HTML ...

<input id="field1" type="text" class="required">

  • Vous n'avez pas besoin de class="required" pour déclarer des règles dans .validate(). C'est redondant et superflu.

  • L'attribut name est manquant. Les règles sont déclarées dans .validate() par leur name. Le plugin dépend d'attributs name uniques pour garder une trace des entrées.

Devrait être...

<input name="field1" id="field1" type="text" />
109
Sparky
$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

<form id="form1" name="form1">
     Field 1: <input id="field1" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>

Vous utilisez également type = "bouton". Et je ne sais pas pourquoi vous devez séparer le bouton de soumission, le placer dans le formulaire C'est plus approprié de le faire de cette façon. Cela devrait marcher.

2
Wap

Vous pouvez également obtenir un autre moyen en utilisant la balise button

Selon nouvel attribut html5, vous pouvez également ajouter un attribut de formulaire tel que

<form id="formId">
    <input type="text" name="fname">
</form>

<button id="myButton" form='#formId'>My Awesome Button</button>

Donc, le bouton sera attaché au formulaire.

Cela devrait fonctionner avec le plugin validate () de jQuery comme:

var validator = $( "#formId" ).validate();
validator.element( "#myButton" );

Cela fonctionne aussi avec la balise input

La source :

https://developer.mozilla.org/docs/Web/HTML/Element/Button

0
Daryl Cluzel