javascript - 引导验证器未验证

Question

我正在尝试使用 Bootstrap Validator 来验证一个表单，该表单分为两个“col-md”类

第一个保存在 .col-md-8 中，第二个保存在 .col-md-3 中。

验证正在处理 .col-md-8 中的那个，但 .col-md-3 中的任何内容都没有验证。

我知道 Bootstrap 验证器的语法是正确的，因为它是早期工作的副本。

有没有人有这方面的经验？

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

验证器javascript：

$('#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'
                        }
                    }

                } 

            }
          });

（使用上面的代码，它的数字没有验证。

Answer 1

一切似乎都是正确的，这是一个示例，如果您仍然遇到问题，请尽可能发布您的 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>