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

Answer 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

演示

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

2 个答案: