Javascript 禁用特定字段的 Bootstrap 验证器

Disabling Bootstrap Validator for certain field

提问by Mobaz

I'm new to Bootstrap Validator and Jquery generally and am trying to accomplish something.

我是 Bootstrap Validator 和 Jquery 的新手，我正在尝试完成一些事情。

I have a form with fields e.g.

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

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

and I have it validating ok with:

我已经通过以下方式验证了它：

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

However, when a certain action is taking place, I'd like to disable the valiadation (do i can upload images to the server). I've looked at the documentation here: http://bootstrapvalidator.com/examples/enable-validator/

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

and have got this:

并得到了这个：

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

but this is simply not working. I know it should be relatively easy, but being a noob I cant work it out.

但这根本行不通。我知道它应该相对容易，但作为菜鸟我无法解决。

Can anyone help?

任何人都可以帮忙吗？

Thanks

谢谢

回答by silviagreen

Here is a working version:http://jsfiddle.net/silviagreen/ym48cfxd/

这是一个工作版本：http: //jsfiddle.net/silviagreen/ym48cfxd/

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

Have a look at the js fiddle to know which version of jquery, bootstrap and bootstrapValidator I used to make it work.

查看 js fiddle 以了解我使用哪个版本的 jquery、bootstrap 和 bootstrapValidator 使其工作。

I know this is an old post but maybe this can be useful to other people.

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

回答by Joe

Try this:

尝试这个：

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

Working sample below:

下面的工作示例：

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

Or see the example in below link: http://bootstrapvalidator.votintsev.ru/examples/enable-validator/

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