BootstrapValidator - отключить специальную проверку для данного поля - PullRequest
Новая
       22

BootstrapValidator - отключить специальную проверку для данного поля

0 голосов
/ 09 января 2019

Есть ли способ динамически отключить определенный валидатор для поля, но все же нужно, чтобы другие валидации применялись к тому же полю.

Пример кода: 

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

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Вы перепутали параметры заказов. Согласно исходному коду оно должно быть: field, enabled, validatorName: 

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

Я протестировал в вашем фрагменте, и он работает.

0 голосов
/ 12 января 2019

Надеюсь, вам это поможет 

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