在使用 bootstrap-validator 验证之前的输入之前禁用输入答案

【问题标题】：Disable input until previous input is validated with bootstrap-validator在使用 bootstrap-validator 验证之前的输入之前禁用输入
【发布时间】：2016-01-27 15:03:13
【问题描述】：

我正在使用bootstrap-validator，它非常适合验证，但我现在需要禁用输入，直到之前的输入得到验证。我查看了 bootstrap-validator 并看到了这些 events，它们看起来对这个过程有帮助，但我不知道如何在输入 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>

//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);
    }
});

【问题讨论】：

标签： javascript jquery forms twitter-bootstrap validation

【解决方案1】：

你的 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);
    }
  })

【讨论】：

谢谢伙计，您的解决方案看起来应该可以工作，但没有。奇怪

【解决方案2】：

由于它使用Constraint Validation 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的演示

【讨论】：

看准队友。谢谢大家