Convalida Jquery, inserire un messaggio di errore in un elemento esistente invece di generare un tag <label>

Question

Io uso Jquery validation plug-in per convalidare questi due elementi di input di seguito. Quando un ingresso è valido il plug-in verrà generato un tag label subito dopo il campo di input, come ad esempio: <label for="company" style="">Required !</label>

Domanda: Come faccio a mettere il messaggio di errore nel esistito <span class="help-inline"> invece di generare un nuovo <label>?

Molte grazie per il vostro aiuto in anticipo.

<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> 

Answer 1

Sarebbe più facile di sfruttare il costruito nelle opzioni e lasciare che il plug-in creare i span elementi. Il risultato finale dell'HTML generato sarà quello che stai richiedendo.

• Usa errorElement per modificare il <label> in un <span>.

• Usa errorClass per cambiare la classe di errore predefinita in 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> 

DEMO: http://jsfiddle.net/eRZFp/

BTW: Il tuo campo User Name mancava l'attributo name, name="username". Affinché questo plugin funzioni correttamente, tutti gli elementi di input devono contenere un attributo name univoco.