javascript - Vô hiệu hóa Bootstrap Validator cho một trường nhất định

Tôi mới làm quen với Bootstrap Validator và Jquery nói chung và đang cố gắng thực hiện một việc gì đó.

Tôi có một mẫu với các trường ví dụ.

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

và tôi đã kiểm tra hợp lệ với:

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

Tuy nhiên, khi một hành động nhất định đang diễn ra, tôi muốn tắt xác thực (để tôi có thể tải hình ảnh lên máy chủ). Tôi đã xem tài liệu ở đây: http://bootstrapvalidator.com/examples/enable-validator/

và đã có cái này:

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

nhưng điều này đơn giản là không hiệu quả. Tôi biết điều đó lẽ ra nên tương đối dễ, nhưng vì là người mới nên tôi không thể giải quyết được.

Có ai giúp được không?

Cảm ơn

Câu trả lời #1

Đây là phiên bản hoạt động: http://jsfiddle.net/silviagreen/ym48cfxd/

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

Hãy xem js fiddle để biết phiên bản jquery, bootstrap và bootstrapValidator mà tôi đã sử dụng để làm cho nó hoạt động.

Tôi biết đây là một bài viết cũ nhưng có lẽ điều này có thể hữu ích cho những người khác.

Câu trả lời #2

Thử cái này:

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

Mẫu làm việc bên dưới:

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

Hoặc xem ví dụ trong liên kết dưới đây: http://bootstrapvalidator.votintsev.ru/examples/enable-validator/