禁用输入，直到使用引导程序验证器验证以前的输入

Disable input until previous input is validated with bootstrap-validator

本文关键字：输入 验证 程序验证器      更新时间：2023-09-26

我正在使用引导验证程序，它非常适合验证，但我现在需要禁用一个输入，直到前一个输入得到验证。我查看了引导验证程序，看到了这些事件，看起来它们在这个过程中会有所帮助，但我不知道如何在输入id上调用它们。

HTML

<form role="form" data-toggle="validator">
    <div class="form-group">
      <input type="text" class="form-control" id="login-name" placeholder="Your Name" data-error="Please provide a valid name" required>
      <div class="help-block with-errors"></div>
    </div>
<div class="form-group">
      <input type="text" class="form-control" id="chosen-name" placeholder="Your Chosen Name" data-error="Please provide a valid name" required disabled>
      <div class="help-block with-errors"></div>
    </div>
    <button type="submit" class="btn btn-default action-btn">Submit</button>
  </form>

JS

//Bootstrap Validator
$('form').validator({
    // Trying to check if #login-name is valid, obviously not working!!!
    if(valid.#login-name){
        $('#chosen-name').prop('disabled', false);
    } else{
        $('#chosen-name').prop('disabled', true);
    }
});

您的js应该是这样的：

 $('form')
.validator()
.on('valid.bs.validator', function (e) {
    if(e.relatedTarget.id==='login-name')
    {
       $('#chosen-name').prop('disabled', false);
    }
  })
.on('invalid.bs.validator', function (e) {
    if(e.relatedTarget.id==='login-name')
    {
       $('#chosen-name').prop('disabled', true);
    }
  })

由于它使用了约束验证API，因此您可以使用

 //Bootstrap Validator
 $('form').validator().on('validated.bs.validator', function(e){
     var target = e.relatedTarget;
     if (target.id == 'login-name'){
         $('#chosen-name').prop('disabled', !target.checkValidity());
     }
 })

演示位置http://codepen.io/gpetrioli/pen/MaGJzL?editors=001

相关文章：