BootstrapValidator

Question

有没有办法动态禁用字段的特定验证器，但仍希望对同一字段应用其他验证。

示例代码：

   $(document).ready(function() {
        $('#registrationForm')
            .bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    fname: {
                        validators: {
                            notEmpty: {
                                message: 'First name is required and cannot be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'First name must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9]+$/,
                                message: 'First name can only consist of alphabetical and digits'
                            }
                        }
                    },
                    lname: {
                        validators: {
                            notEmpty: {
                                message: 'Last name is required and cannot be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'Last name must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9]+$/,
                                message: 'Last name can only consist of alphabetical and digits'
                            }
                        }
                    }
                }
            })
            .on('error.validator.bv', function(e, data) {
                data.element
                    .data('bv.messages')
                    .find('.help-block[data-bv-for="' + data.field + '"]').hide()
                    .filter('[data-bv-validator="' + data.validator + '"]').show();
            });
    });

     $(document).on("change keyup paste", "#fName", function () {
          if($('#fname').val()==="") {  $('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', true);
          } else {
            $('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', false);
          }
        });

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
    </head>
    <body>
    <form id="registrationForm" method="post" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" autocomplete="off" class="form-control" name="fname" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" autocomplete="off" class="form-control" name="lname" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-5 col-sm-offset-3">
                <button type="submit" class="btn btn-default">Validate</button>
            </div>
        </div>
      </form>
    </body>
    </html>

在此示例中，我想动态禁用 notEmpty 的验证，但仍想查看 stringLength

的验证消息

我试过下面的代码，但没有成功

$('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', 'notEmpty', false);

---更新---

更新了示例以使其变得简单。

我有名字和姓氏字段。如果输入名字，则姓氏不是必需的。这意味着我不需要 notEmpty 的验证消息。但是如果用户决定为姓氏输入一个值，那么它应该满足其他剩余验证 stringLength 和 regexp.

Answer 1

希望对您有所帮助

$(document).ready(function() {
    $('#registrationForm')
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]+$/,
                            message: 'The username can only consist of alphabetical and digits'
                        }
                    }
                }
            }
        })
        .on('error.validator.bv', function(e, data) {
            data.element
                .data('bv.messages')
                .find('.help-block[data-bv-for="' + data.field + '"]').hide()
                .filter('[data-bv-validator="' + data.validator + '"]').show();
        });
});

 $(document).on("change", "#inlineCheckbox1", function () {
      if($(this).is(":checked")) {
        $('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', true,'notEmpty');
      } else {
        $('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', false,'notEmpty');
      }
    });

#registrationForm{
   padding:2rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
</head>
<body>
<form id="registrationForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Username</label>
        <div class="col-sm-4">
            <input type="text" autocomplete="off" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
    
  <div class="form-group"> 
         <label  for="inlineCheckbox1">Validate</label>
         <input type="checkbox" id="inlineCheckbox1" value="option1" checked>
    
  </div>
    
</form>
</body>
</html>

Answer 2

你弄乱了参数顺序。根据 source code 应该是：field, enabled, validatorName:

$('#registrationForm').bootstrapValidator('enableFieldValidators',
  'username', false, 'notEmpty');

我已经在您的代码段中进行了测试并且它有效。

BootstrapValidator - 禁用给定字段的特定验证

BootstrapValidator - Disable specific validation for given field

javascript

validation

jquery