règles multiples avec le plugin jQuery Validation

Question

Je la forme suivante:

<form id="fromWiw" action="..." method="post">      
    ... 
    <div class="controls span5 pull-left"> 
     <label class="control-label" for="Quantity">@Resources.Quantity</label> 
     <input class="span12" id="Quantity" name="Quantity" type="number" min="0" value="0" required /> 
    </div> 
    <div class="controls span5 pull-left"> 
     <label class="control-label" for="Price">@Resources.Price</label> 
     <input class="span12" id="Price" name="Price" required /> 
    </div> 
    ... 
</form> 

Pour la partie de validation, j'ai cet extrait de code:

form.submit(function() { 
    form.validate(
     { 
      rules: { 
       Quantity: { required: true, number: true}, 
       Price: { required: true, number: true } 
      } 
     }); 
}); 

PROBLÈME La validation fonctionne très bien, il détecte quand le prix et la quantité sont vides. Cependant, la validation réussit lorsque l'entrée de prix contient des valeurs non numériques, du texte par exemple. La validation fonctionne correctement pour l'entrée Quantité. Est-ce que je fais quelque chose de mal ici?

Answer 1

Votre code:

form.submit(function() { 
    form.validate({ 
     ... 
    }) 
}) 

"La validation fonctionne très bien pour l'entrée Quantité Est-ce que je fais quelque chose de mal ici.?"

Oui, vous êtes.

.validate() est que la méthode d'initialisation du plug-in sur votre formulaire ... ce n'est pas la méthode d'essai et ne fait donc pas à l'intérieur d'un gestionnaire submit. Il devrait être appelé une fois sur DOM prêt à la place. Le plugin capturera automatiquement l'événement submit.

$(document).ready(function() { 

    $('#myform').validate({ 
     // rules & options 
    }); 

}); 

Vous mélangez également la validation HTML5 avec le plugin Validation.

Il n'est pas nécessaire de mettre l'attribut required dans le code HTML et de déclarer required dans .validate(). Le plugin va le prendre de l'une ou l'autre méthode; et lorsque le plugin est utilisé, il ajoute dynamiquement un attribut novalidate="novalidate" dans la balise <form> pour désactiver toute validation HTML5.

travail DEMO: http://jsfiddle.net/bNGQP/