Question

我一般都是Bootstrap Validator和Jquery的新手，我正在努力完成某些事情。

我有一个包含字段的表单，例如

<div class="form-group" id="price_container">
    <label for="price">Asking Price</label><input class="form-control" style="width: 50%;" type="text" id="price" name="price" >
</div>

<div class="form-group">
    <label for="title">Title</label>
    <input class= "form-control" type="text" name="title">
</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'
                   }      
                }
            }
        }
    });

然而，当某个动作发生时，我想禁用valiadation（我可以将图像上传到服务器）。我在这里查看了文档：http://bootstrapvalidator.com/examples/enable-validator/

并且得到了这个：

$(document).on("click", ".btn-danger", function () {
      $('#multiform').bootstrapValidator().enableFieldValidators('price', false);
}

但这根本不起作用。我知道它应该相对容易，但作为一个菜鸟我不能解决它。

有人可以帮忙吗？

由于

Answer 1

以下是工作版本：http://jsfiddle.net/silviagreen/ym48cfxd/

   $(document).on("click", ".btn-danger", function () {
        var bootstrapValidator = $('#multiform').data('bootstrapValidator');
        bootstrapValidator.enableFieldValidators('price', false);
   });

看看js小提琴，知道我用过哪个版本的jquery，bootstrap和bootstrapValidator。

我知道这是一个老帖子，但也许这对其他人有用。

Answer 2

尝试一下：

$('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', true);

下面的工作示例：

$(document).ready(function() {
    $('#surveyForm').find('[name="list_type"]')
        .change(function(e) {
           $('#surveyForm').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'
                   }      
                }
            }
        }
    });
    
    $(document).on("change", "#inlineCheckbox1", function () {
      if($(this).is(":checked")) {
        $('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', true);
      } else {
        $('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', false);
      }
    });
    
    $("#surveyForm").submit(function(e){
      alert("Validation completed");
      return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form id="surveyForm" method="post" class="form-horizontal">
  <div class="form-group" id="price_container">
    <label class="col-sm-3 control-label" for="price">Asking Price</label>
    <div class="col-sm-5">
      <input class="form-control" style="width: 50%;" type="text" id="price" name="price" >
    </div>
  </div>
  <div class="form-group">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" checked>
      <label class="form-check-label" for="inlineCheckbox1">Validate</label>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Validate</button>
  </div>
</form>

或查看以下链接中的示例： http://bootstrapvalidator.votintsev.ru/examples/enable-validator/

禁用某些字段的Bootstrap Validator

2 个答案: