javascript - 禁用输入，直到使用 bootstrap-validator 验证先前的输入

Question

我正在使用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>

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

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