必要な入力を伴うブートストラップローディング状態の問題

Question

ブートストラップ3の新機能です。フォームにローディング状態ボタン機能を使用したいと思います。私はこのような必須オプションを持つ入力フィールドを作成しました。

$("button").click(function() { 
    var $btn = $(this); 
    $btn.button('loading'); 
}); 

入力が空になったとき、私は送信ボタンをクリックすると、送信ボタンを

<form> 
    <input class="input" name="title" type="text" required /> 
    <button type="submit" data-loading-text="Loading..." class="btn btn-primary"> 
    Loading state 
    </button> 
</form> 

は無効になります。でも答え

Answer 1

この問題を解決するためにはここで

Fiddle

おかげで、form代わりのbuttonのclickのsubmitイベントにフック...私は入力を埋めました。これは、フィールドが有効な場合にのみフォームが送信されるため、ボタンの状態を変更する前に検証エラーを修正する必要があるためです。これを試してみてください：

$("form").submit(function(e) { 
 
    var $btn = $(this).find('button'); 
 
    $btn.button('loading'); 
 

 
    e.preventDefault(); // only for this demo to stop the actual form submission 
 

 
    // make your AJAX request here... 
 
});

.input, 
 
.btn-primary { 
 
    display: block; 
 
    width: 400px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<form> 
 
    <input class="input" name="title" type="text" required /> 
 
    <button type="submit" data-loading-text="Loading..." class="btn btn-primary"> 
 
     Loading state 
 
    </button> 
 
</form>