6

この問題の解決策を StackOverflow で検索しましたが、機能するものは見つかりませんでした。

Bootstrap Validator でフォームを検証していますが、うまく機能します。submitフォーム全体が有効になり、Bootstrap Validator が機能するまで、ボタンを無効にしたいと考えていisValid()ます。この関数を使用して、私ができる最善のことはキーアップです。これは醜いです。

フォームがその有効性を評価しているときは常にラグ タイムがあり、送信ボタンが有効から無効にすばやく点滅します。

setTimeoutorでこの点滅を修正し.delay()、現在のようにフォーム機能を維持する方法はありますか?

または、これに対する純粋な Bootstrap Validator ソリューションはありますか? (これが理想的です) ドキュメントを調べましたが、役立つ情報は見つかりませんでした。フォームが検証される時間を設定する方法しかありませんが、これは私の原因にはなりません。

これは、問題を示すJSFiddleです。

4

1 に答える 1

5

私はあなたのコードをより詳しく見て、あなたが望む効果のためにいくつかの重要な領域を変更することになりました.

  1. フィールドのステータスが変化するたびにブートストラップ バリデーター (BV) がスローするトリガーを変更しましたkeyup。status.field.bv
  2. isValid()jquery 関数 (BV 設定を考慮しない) を使用する代わりに、has-successBV がそれぞれに適用されるクラスの存在を確認しますform-group。
  3. フォーム グループから成功ボタンを削除しました。

コードは次のとおりです。

HTML:

<form id="test">
    <div class="form-group">
        <input class="form-control input-lg" name="email" type="text" size="35" placeholder="Email*"></input>
    </div>
    <div class="form-group">
        <input class="form-control input-lg" name="password" type="password" size="35" placeholder="Confirm Password*"></input>
    </div>
    <input class="btn btn-lg btn-success submit-button" style="width: 100%;" value="Sign Up!" type="submit" disabled></input>
</form>

Javascript:

$( '#test' ).on( 'status.field.bv', function( e, data ) {
    let $this = $( this );
    let formIsValid = true;

    $( '.form-group', $this ).each( function() {
        formIsValid = formIsValid && $( this ).hasClass( 'has-success' );
    });

    $( '.submit-button', $this ).attr( 'disabled', !formIsValid );
});

JSFiddle: http://jsfiddle.net/ejyef7vc/3/

于 2014-11-10T15:38:55.373 に答える