2014-07-23 83 views
0

我想用this插件來驗證我的表單。我的表單由許多其他形式(我使用django)組成。所以它看起來像這樣引導驗證器和選擇器

<form action="" id="register-form" method="post"> 

    <div class="container bg-white"> 
     <div class="tab-container"> 
      <div class="tab-content"> 

       <div class="tab-pane fade in active" id="client-details"> 
        <fieldset> 
         <legend>Personal Data</legend> 
         <span class="help-inline">This are your billing data</span> 

          <div class="form-group"> 
           <label for="id_client-first_name">First name:</label> 
           <input class="form-control input-sm" id="id_client-first_name" maxlength="40" name="client-first_name" type="text"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-middle_name">Middle name:</label> 
           <input class="form-control input-sm" id="id_client-middle_name" maxlength="40" name="client-middle_name" type="text"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-last_name">Last name:</label> 
           <input class="form-control input-sm" id="id_client-last_name" maxlength="40" name="client-last_name" type="text"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-adress">Adress:</label> 
           <input class="form-control input-sm" id="id_client-adress" maxlength="40" name="client-adress" type="text"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-email">Email:</label> 
           <input class="form-control input-sm" id="id_client-email" maxlength="75" name="client-email" type="email"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-phone_no">Phone no:</label> 
           <input class="form-control input-sm" id="id_client-phone_no" maxlength="20" name="client-phone_no" type="text"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-mobile">Mobile:</label> 
           <input class="form-control input-sm" id="id_client-mobile" maxlength="20" name="client-mobile" type="text"> 
          </div> 


          <div class="form-group"> 
           <label for="id_client-no_of_doctors">No of doctors:</label> 
           <input class="form-control input-sm" id="id_client-no_of_doctors" name="client-no_of_doctors" type="number"> 
          </div> 



        </fieldset> 
       </div> 
       <div class="tab-pane fade" id="user-data"> 

         <div class="form-group"> 
          <label for="id_personal_data-first_name">First name:</label> 
          <input class="form-control input-sm" id="id_personal_data-first_name" maxlength="30" name="personal_data-first_name" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_personal_data-last_name">Last name:</label> 
          <input class="form-control input-sm" id="id_personal_data-last_name" maxlength="30" name="personal_data-last_name" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_personal_data-email">Email:</label> 
          <input class="form-control input-sm" id="id_personal_data-email" name="personal_data-email" type="text"> 
         </div> 


       </div> 
       <div class="tab-pane fade" id="practice-details"> 

         <div class="form-group"> 
          <label for="id_practice_data-name">Name:</label> 
          <input class="form-control input-sm" id="id_practice_data-name" maxlength="50" name="practice_data-name" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_practice_data-address">Address:</label> 
          <input class="form-control input-sm" id="id_practice_data-address" maxlength="50" name="practice_data-address" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_practice_data-postal_code">Postal code:</label> 
          <input class="form-control input-sm" id="id_practice_data-postal_code" maxlength="10" name="practice_data-postal_code" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_practice_data-phone_no">Phone no:</label> 
          <input class="form-control input-sm" id="id_practice_data-phone_no" maxlength="10" name="practice_data-phone_no" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_practice_data-city">City:</label> 
          <input class="form-control input-sm" id="id_practice_data-city" maxlength="10" name="practice_data-city" type="text"> 
         </div> 

         <div class="form-group"> 
          <label for="id_practice_data-logo">Logo:</label> 
          <input id="id_practice_data-logo" name="practice_data-logo" type="file"> 
         </div> 


       </div> 

      </div> 
     </div> 
     <input type="submit" id="btn-register" name="register" class="btn btn-default btn-sm"> 
    </div> 

</form> 

因爲我使用前綴加載表單,name屬性看起來像這個「prefix-field_name」。但是這個syntac不能和插件驗證器一起使用。所以不得不使用選擇器。我的客戶端電子郵件設置如下

$("#register-form").bootstrapValidator({ 

    fields:{ 

     id_client_email: { 
      selector:"#id_client-email", 
       validators: { 
        remote:{ 
         url:"/order/email_check_availability/", 
         message: "This email already exists" 
        }, 
        notEmpty:{ 
         message: "This field is required" 
        } 
       } 
      } 
     } 
    }); 

但它似乎不工作,它不會顯示任何錯誤。唯一的錯誤是當我開始在電子郵件字段上輸入時它說它無效。但是我怎樣才能添加額外的驗證器?是因爲有一個名字,我也使用選擇器嗎?它不會說文檔中的任何地方,名稱總是覆蓋選擇器屬性。

回答

0

工作!我不得不把字段放在引號內。因此,現場客戶端電子郵件必須放入插件

中的字段部分,如 "client-email"