JQuery Validation Plugin: Utilisation de plusieurs errorLabelContainers

Question

J'ai un formulaire qui, en fonction de la valeur sélectionnée du groupe radio userAction, affiche les champs loginFields ou signupFields. En outre, j'ai deux conteneurs d'erreur - errorMessageLogin et errorMessageSignup - à afficher des messages d'erreur respectifs à la valeur sélectionnée de la useraction:

<div id="errorsSection"> 
    <div id="errorMessageLogin"> 
     <!-- Login Error Messages go here --> 
    </div>     

    <div id="errorMessageSignup"> 
     <!-- Signup Error Messages go here --> 
    </div> 
</div> 
<div id="contentSection">Lorem ipsum dolor sit amet...</div> 
<div id="formSection"> 
    <form id="myForm"> 
     <input name="userAction" type="radio" value="login" checked="checked">Login</input> 
     <br /> 
     <input name="userAction" type="radio" value="signup">Sign Up</input> 

     <div id="loginFields" style="display:none"> 
      <!-- Login fields: email address and, password --> 
     </div> 

     <div id="signupFields" style="display:none"> 
      <!-- Signup fields: name, age, email address, and password --> 
     </div> 
    </form> 
</div> 

J'utilise le jQuery Validation Plugin comme ceci:

$("#myForm").validate({ 
    submitHandler: function (form) { 
     MyWebService.DoWork(form); 
    }, 
    rules: myRules, 
    errorLabelContainer: null, // how to determine at runtime? 
    messages: myMessages, 
    highlight: function (element, errorClass) { 
     $(element).prev().addClass(errorIcon); 
     $(element).addClass(errorClass); 
     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); 
    }, 
    unhighlight: function (element, errorClass) { 
     $(element).prev().removeClass(errorIcon); 
     $(element).removeClass(errorClass); 
     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); 
    } 
}); 

Je souligne champs invalides en changeant la classe des éléments et ajouter une petite icône à proximité; Cela fonctionne très bien. Cependant, en plus de la surbrillance, j'aimerais afficher les messages définis dans myMessages dans errorMessageLogin ou errorMessageSignup en fonction de la sélection dans le groupe radio userAction. Cependant, il semble que la valeur de errorLabelContainer soit d'être un objet jQuery et non une fonction, ce qui est regrettable, car je serais capable de déterminer quelle erreur afficher dans une fonction.

Est-il possible de basculer le conteneur d'erreurs à utiliser par le plugin jQuery Validation?

Answer 1

Vous pouvez utiliser la fonction de rappel errorPlacement dans votre objet validate pour personnaliser le placement des étiquettes d'erreur créés. Cette fonction accepte deux paramètres: erreur et élément. Un exemple de docs jQuery (http://docs.jquery.com/Plugins/Validation/validate):

$("#myform").validate({ 
    errorPlacement: function(error, element) { 
    error.appendTo(element.parent("td").next("td")); 
    }, 
    debug:true 
}) 

Answer 2

Ce n'est pas testé, mais plutôt une idée de vous lancer sur le chemin ...

$("#myForm").validate({ 
submitHandler: function (form) { 
    MyWebService.DoWork(form); 
}, 
rules: myRules, 
errorLabelContainer: function() { 
    var rdoValue = $("input[name='userAction']:checked").val(); 
    // branch and return the container based on value... 
}, 
messages: myMessages, 
highlight: function (element, errorClass) { 
    $(element).prev().addClass(errorIcon); 
    $(element).addClass(errorClass); 
    $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); 
}, 
unhighlight: function (element, errorClass) { 
    $(element).prev().removeClass(errorIcon); 
    $(element).removeClass(errorClass); 
    $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); 
} 
}); 

Answer 3

Je devine que vous ne pouvez pas utiliser deux formes différentes? Ce serait un moyen plus simple de séparer la fonctionnalité du message d'erreur? Et cachez simplement une forme ou l'autre?