Jquery de validation, de mettre de message d'erreur dans un élément existant au lieu de générer un <label> tag

- Je utiliser Jquery validation plug-in pour valider ces deux éléments d'entrée ci-dessous.
Lorsqu'une saisie est invalide le plug-in va générer une balise d'étiquette à droite après le champ de saisie, tels que: <label for="company" style="">Required !</label>

Question:
Comment puis-je mettre le message d'erreur dans le existé <span class="help-inline"> au lieu de générer une nouvelle <label> ?

Merci beaucoup pour votre aide à l'avance.

<script type="text/javascript">

 $('#signUpForm').validate({
                            debug: false,
                            rules: {company:"required",username:"required"},
                         messages: {company:"Required !",username:"Required !"}
                          })//End of validate()

</script>


<div class="control-group">
   <label class="control-label" for="company">Company Name</label>
   <div class="controls">
      <input type="text" name="company">
      <label for="company">Required !</label> //-> this line is generated by Plug-In.
      <span class="help-inline">(required)</span>
   </div>
</div>

<div class="control-group">
   <label class="control-label" for="username">User Name</label>
   <div class="controls">
      <input type="text" name="username">
      <span class="help-inline">(required)</span>
   </div>
</div>
InformationsquelleAutor Ray C Lin | 2013-06-10
  1. 15

    Il serait plus facile de tirer parti de la construction dans les options et de laisser le plugin créer votre span éléments. Le résultat final de l'HTML généré sera ce que vous demandez.

    • Utilisation errorElement pour changer le <label> dans un <span>.

    • Utilisation errorClass modifier la valeur par défaut de classe d'erreur dans help-inline

    jQuery:

    $(document).ready(function () {

    $('#signUpForm').validate({ //initialize the plugin
        errorElement: 'span',
        errorClass: 'help-inline',
        rules: {
            company: "required",
            username: "required"
        },
        messages: {
            company: "Required !",
            username: "Required !"
        }
    });

});

    HTML:

    <form id="signUpForm">
    <div class="control-group">
        <label class="control-label" for="inputCompanyName">Company Name</label>
        <div class="controls">
            <input name="company" type="text" id="inputCompanyName" placeholder="" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputFirst">User Name</label>
        <div class="controls">
            <input name="username" type="text" id="username" placeholder="" />
        </div>
    </div>
    <input type="submit" />
</form>

    DÉMO: http://jsfiddle.net/eRZFp/

    BTW: Votre User Name champ manquait le name attribut, name="username". Pour que ce plugin fonctionne correctement, tous les éléments d'entrée doit contenir un unique name attribut.

    • Salut Sparky, Merci pour la réponse, il fonctionne exactement comme je le voulais, et le lien de démonstration est GÉNIAL !!
    InformationsquelleAutor Sparky