0

我試圖使用引導驗證來驗證形式,它跨越兩個「COL-MD」類引導驗證沒有驗證

第一分割.COL-MD-8和第二內保持在.col-md-3中。

驗證正在處理.col-md-8中的一個,但.col-md-3中沒有任何驗證。

我知道Bootstrap驗證器的語法是正確的,因爲它是一個正在工作的早期版本的副本。

有沒有人有這方面的經驗? 。JavaScript的

<div class="form-group"> 
     <label for="number">House Number</label> 
     <input class= "form-control" style="width:30%;" type="text" name="number" placeholder="e.g. 2a">  
</div> 

驗證:

$('#multiform') 
    .find('[name="list_type"]') 
      .change(function(e) { 
       $('#multiform').bootstrapValidator('revalidateField', 'price'); 
      }) 
      .end() 
      .bootstrapValidator({ 
     message: 'This value is not valid', 
     feedbackIcons: { 
      required: 'fa fa-asterisk', 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
       price: { 
        validators: { 
         notEmpty: { 
          message: 'The price is required and cannot be empty' 
         }, 
         integer: { 
          message: 'You can only enter an integer' 
         }, 
         regexp: { 
         regexp: /^[0-9]+$/, 
         message: 'The price can only consist of numbers' 
        }  
        } 
       }, 
       title: { 
        validators:{ 
         notEmpty: { 
          message:'This field cannot be empty' 
         }, 
         regexp: { 
         regexp: /^[a-zA-Z0-9]+$/, 
         message: 'The title can only consist of letters and numbers' 
         } 
        } 
       }, 
       desc: { 
        validators:{ 
         notEmpty: { 
          message: 'This field cannot be empty' 
         }, 
         stringLength: { 
          max: 500, 
          message: 'Your description is too long' 
         }, 
         regexp: { 
         regexp: /^[a-zA-Z0-9#*]+$/, 
         message: 'The house number can only consist of letters and numbers' 
         } 
        } 
       }, 
       number: { 
        validators:{ 
         notEmpty: { 
          message: 'This field cannot be empty' 
         } 
        } 

       } 

      } 
      }); 

(與上面的代碼,它沒有被驗證的數量

+0

嘗試使用其他名稱'number'被保留在jQuery的驗證命名空間。 – 2014-09-25 23:08:16

+0

有沒有嘗試將名稱''數字'改成別的東西,就像@ZeeTee說的那樣? – Arkni 2014-09-27 18:07:37

+0

做到了,但仍然不起作用 – Mobaz 2014-09-27 18:08:49

回答

0

一切似乎是正確的,這裏是一個例子,如果發表您的HTML如果您仍然遇到問題,則可以使用。

請參閱代碼段

$('#multiform') 
 
    .find('[name="list_type"]') 
 
    .change(function(e) { 
 
    $('#multiform').bootstrapValidator('revalidateField', 'price'); 
 
    }) 
 
    .end() 
 
    .bootstrapValidator({ 
 
    message: 'This value is not valid', 
 
    feedbackIcons: { 
 
     required: 'fa fa-asterisk', 
 
     valid: 'glyphicon glyphicon-ok', 
 
     invalid: 'glyphicon glyphicon-remove', 
 
     validating: 'glyphicon glyphicon-refresh' 
 
    }, 
 
    fields: { 
 
     price: { 
 
     validators: { 
 
      notEmpty: { 
 
      message: 'The price is required and cannot be empty' 
 
      }, 
 
      integer: { 
 
      message: 'You can only enter an integer' 
 
      }, 
 
      regexp: { 
 
      regexp: /^[0-9]+$/, 
 
      message: 'The price can only consist of numbers' 
 
      } 
 
     } 
 
     }, 
 
     title: { 
 
     validators: { 
 
      notEmpty: { 
 
      message: 'This field cannot be empty' 
 
      }, 
 
      regexp: { 
 
      regexp: /^[a-zA-Z0-9]+$/, 
 
      message: 'The title can only consist of letters and numbers' 
 
      } 
 
     } 
 
     }, 
 
     desc: { 
 
     validators: { 
 
      notEmpty: { 
 
      message: 'This field cannot be empty' 
 
      }, 
 
      stringLength: { 
 
      max: 500, 
 
      message: 'Your description is too long' 
 
      }, 
 
      regexp: { 
 
      regexp: /^[a-zA-Z0-9#*]+$/, 
 
      message: 'The house number can only consist of letters and numbers' 
 
      } 
 
     } 
 
     }, 
 
     number: { 
 
     validators: { 
 
      notEmpty: { 
 
      message: 'This field cannot be empty' 
 
      } 
 
     } 
 

 
     } 
 

 
    } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form id="multiform" name="multiform" method="post"> 
 
    <div class="form-group"> 
 
     <label for="price">Price</label> 
 
     <input class="form-control" id="price" type="text" name="price" placeholder="e.g. 2a"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="number">House Number</label> 
 
     <input class="form-control" id="number" type="text" name="number" placeholder="e.g. 2a"> 
 
    </div> 
 
    <input class="btn" type="submit" value="Send"> 
 
    </form> 
 
</div>