Charger un message d'erreur personnalisé lorsque la validation de jquery échoue

Question

Bonjour Je travaille avec une application qui a déjà quelques critères de validation, et qui charge des divs cachés, spécifiques à l'erreur. Maintenant, j'ai quelques lignes dynamiques à remplir, car je ne suis pas au courant de quel type d'entrée ils seraient, j'automatise le processus de validation en utilisant le plugin de validation de jquery.

Maintenant je n'arrive pas à comprendre comment je pourrais afficher un bloc, quand certains éléments requis n'ont pas été remplis. Actuellement, je voudrais vérifier une condition telle que

  if(country.length == 0 && state == 'xx') 
      { 
       go = false; 
       document.getElementById('reqStateMsg').style.display = 'block'; 
      } 

Comment le ferais-je dans la méthode de validation jQuery ?? Actuellement, je suis en train de charger tous les éléments avec une classe de requis. Mais pour afficher la méthode d'erreur, je dois également ajouter "*" qui chargerait une méthode générique, qui fonctionnerait à partir de mes éléments d'entrée dynamiques, mais je veux charger mes blocs div d'erreur personnalisés pour les éléments d'entrée statiques.

Maintenant j'appelle seulement la méthode de validation maintenant, je ne suis pas sûr comment j'ajouterais charger les div divisés par erreur d'ici.

$('#FormInfo').validate(); 

Answer 1

Vous pouvez le faire de plusieurs façons différentes, d'abord, vous pouvez utiliser l'option errorContainer de jQuery valider():

$("#form1").validate({ 
    errorLabelContainer: "#error-container-form1 ul", 
    wrapper: "li" 
}); 

Avec HTML comme ceci:

<form action="#" id="form1"> 
    <label for="Country">Country:</label> 
    <input name="Country" title="Country is required" id="Country" class="required"/> 
    <label for="State">State:</label> 
    <input name="State" title="Please enter a state" id="State" class="required"/> 
    <input type="submit" value="Submit" /> 
</form> 

Cela supprimerait votre besoin d'un <div> spécial pour les messages d'erreur.

---

Cependant, si vous avez besoin d'un <div> pour les messages d'erreur que vous pouvez faire quelque chose comme ceci:

$("#form2").validate({ 
    invalidHandler: function(form, validator) { 
     if (!$("form#form2").validate().element("#State2")) { 
      $("div#error-container-form2").append($("div#state-error")); 
      $("div#state-error").show(); 
     } 
    } 
}); 

et le code HTML suivant:

<form action="#" id="form2"> 
    <label for="Country2">Country:</label> 
    <input name="Country2" title="Country is required" id="Country2" class="required"/> 
    <label for="State2">State:</label> 
    <input name="State2" id="State2" class="required"/> 
    <input type="submit" value="Submit" /> 
</form> 
<div id="error-container-form2"></div> 

<div id="state-error" style="display:none">Please enter a State!</div> 

Exemple: http://jsfiddle.net/JWTTZ/

La validation de jQuery est assez flexible. Assurez-vous de lire la documentation here.

Answer 2

if($(".erroclass").size() > 0) { 
    $("#reqStateMsg").css("display", "block"); 
} 

Answer 3

Ce n'est pas très jQuery comme ...

Mais ceci est:

$("#your-form-name").submit(function(){ 
if(country.length != 0 && state != 'xx') { 
    return true; 
} 
$("#reqStateMsg").fadeIn().fadeOut(5000); // slowly fadeout ;) 
return false; 
});