2

フォームの検証に jquery validate プラグインを使用しています。キャンセル機能で何かおかしいと思います。1 つの電子メール フィールド、送信ボタン、およびキャンセル ボタンを含むフォームがあります。電子メール フィールドに不完全なアドレスを入力し、ページの他の場所をクリックせずに [キャンセル] をクリックすると、バリデータは電子メール フィールドをチェックし、フィールドの横に無効なメッセージを表示し、キャンセル アクションを強制終了します。

ここで関連する質問を見つけました: jQuery Validation plugin: disable validation for specified submit buttons。それは私が必要とするものとまったく同じように見えます。しかし、それはうまくいきません！「キャンセル」CSS クラスをキャンセル ボタンに追加しましたが、何の効果もありませんでした。

このサンプル コードは、私が見ている問題を示しています。FF と Chrome の両方でこの動作が見られます。

このサンプルでは、​​テキスト入力に無効な電子メール アドレスを入力し、他の操作をクリックする前に [キャンセル] ボタンをクリックすると、バリデーターはテキスト入力の横にメッセージを表示し、キャンセル アクションは発生しません。もう一度キャンセルをクリックすると、ページが期待どおりにリロードされます。つまり、ページをキャンセルするには、事実上キャンセルを 2 回クリックする必要があります。

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").validate()

        $(".cancel").click(function () {
            location.reload(true)
        })

    })
</script>

<div>
    <form name="myForm" id="myForm" action="index.html">
        <input type="text" class="required email" id="myField" name="myField"/>
        <input type="submit" value="Submit"/>
        <input type="submit" value="Cancel" class="cancel"/>
    </form>
</div>

また興味深い: jquery 検証ドキュメント ( http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit )にあるデモを実行してみました。デモを実行すると、検証が機能しているかどうかわかりません。gobbledygook と入力して送信ボタンをクリックしても、メール フィールドが無効とマークされることはありません。私が得たのは、フォームの submitHandler に追加された単純なアラートだけです。また、キャンセル ボタンも同じように動作するため、キャンセル クラスを追加してもまったく機能するかどうかはわかりません。

これをFFとChromeの両方で実行しています。jquery 1.9.1 と jquery-validate 1.11.4 を使用しています。

4

1 に答える 1

9

あなたが参照する質問で受け入れられた答えに従って、クラスを追加することcancelは検証を「抑制する」だけです。このデモでわかるように、キャンセルボタンは、検証がバイパスされることを除いて、別の送信ボタンとまったく同じように動作します。キャンセルボタンがクリックされたときに何が起こるかを正確に説明してください。

そうでなければ、多分これはあなたが望むものです：http: //jsfiddle.net/25XBT/

jQuery：

$(document).ready(function () {

    var validate = $('#myform').validate({
        // your rules & options
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

HTML：

<form id="myform">
    <input type="text" name="myfield" />
    <input type="submit" />
    <input type="submit" id="cancel" class="cancel" value="cancel" />
</form>

参照： http ：//docs.jquery.com/Plugins/Validation/Validator/resetForm

編集： 属性class="cancel"を優先して非推奨になりました。formnovalidate

<input type="submit" id="cancel" formnovalidate="formnovalidate" value="cancel" />
于 2013-02-25T18:02:39.357 に答える