JQuery doğrulaması, <label> etiketi oluşturmak yerine varolan bir öğeye hata iletisi koyar

Question

Aşağıdaki iki giriş öğesini doğrulamak için Jquery validation plug-in kullanıyorum. bir giriş gibi Eklenti doğru giriş alanına sonra bir etiket etiketi oluşturacaktır geçersiz olduğunda: <label for="company" style="">Required !</label>

Soru: Yeni bir <label> üretme yerine varolan <span class="help-inline"> hata iletisi koymak nasıl ?

Yardımlarınız için şimdiden teşekkür ederiz.

<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

seçenekleri inşa kaldıraç ve eklenti span öğeleri oluşturmak izin vermek daha kolay olurdu. Oluşturulan HTML’nin sonucu, isteğiniz olacaktır.

• kullanın errorElement bir <span> içine <label> değiştirmek için.

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

• Kullanım errorClasshelp-inline

jQuery içine varsayılan hata sınıfını değiştirmek içinDEMO: http://jsfiddle.net/eRZFp/ BTW

: Sizin User Name alan name niteliği, name="username" eksikti. Bu eklentinin düzgün çalışması için, tüm giriş öğelerinin benzersiz bir name özniteliği içermesi gerekir.