禁用输入，直到使用引导验证器验证以前的输入为止。

Question

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

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

Answer 1

因为它使用的是您可以使用的约束验证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演示

Answer 2

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