禁用輸入，直到之前的輸入通過引導驗證器驗證

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

由於它採用了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

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