为某些字段禁用引导验证器

Posted 2023-02-22

【中文标题】为某些字段禁用引导验证器

【英文标题】：Disabling Bootstrap Validator for certain field

【发布时间】：2014-11-23 19:16:56

【问题描述】：

我是 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'
                         
                
            
        
    );

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

并且得到了这个：

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

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

谁能帮忙？

谢谢

【问题讨论】：

您想在单击按钮或其他内容时禁用某个字段的所有验证器吗？

对于最后一个代码，你也可以这样做：$('#multiform').data('bootstrapValidator').enableFieldValidators('price', false);

是 - 单击按钮时禁用所有验证器，以便 ajax 上传可以继续进行，而不管其他表单字段

我想你想要这样的小提琴jsfiddle.net/Arkni/c377ub41，对吧？

这里有一个建议：1. 你需要禁用所有字段的所有验证器（考虑使用 enable 选项） 2. ajax 请求完成后（成功功能）你必须再次启用主题。

【参考方案1】：

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

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

看看 js fiddle 就知道我用了哪个版本的 jquery、bootstrap 和 bootstrapValidator 来让它工作。

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

【参考方案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/