jquery - 送信ハンドラーを使用した jQuery 検証

Question

jQuery 検証プラグインの validate メソッドを使用してフォーム検証をセットアップし、input 要素の値を変更する送信ハンドラーを用意しました (YUI エディターを使用し、iframe のコンテンツを textarea 要素にコピーするには saveHTML() 呼び出しが必要です)。フォームを送信するときに、送信ハンドラーを実行した後にバリデーターがフォームを検証するようにします。ただし、検証呼び出しの後に登録されている場合、送信ハンドラーは実行されません。

例えば、

<form id="form1" action="/test">
    <input type="text" name="txt1" id="txt1" />
    <input type="submit" value="submit" />

$(document).ready(function() {
    $("#form1").submit(function() {
        $("#txt1").val("123456");
    });

    $("#form1").validate({
        rules: {
            txt1: {
                maxlength: 5
            }
        }
    });
});

送信ハンドラーの後にフォームが検証されるため、送信がキャンセルされます。

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            txt1: {
                maxlength: 5
            }
        }
    });

    $("#form1").submit(function() {
        $("#txt1").val("123456");
    });
});

ただし、順序を変更すると、送信ハンドラーの前にフォームが検証されます。

Answer 1

コールバックを使用してbeforeSubmit値を設定できます。

$(function() {
    $('#form1').validate({
        rules: {
            txt1: { maxlength: 5 }
        },
        beforeSubmit: function(arr, $form, options) {
            $('#txt1').val('123456');
            return true;
        }
    });
});

Answer 2

試す

$(document).ready(function() {
    $("#form1").submit(function() {
        $("#txt1").val("123456");

        $("#form1").validate({
            rules: {
                    txt1: {
                            maxlength: 5
                    }
            }
        });
    });
});

このようにして、検証は送信イベントハンドラーによってトリガーされます。

Answer 3

これを簡単に使用できます：

var validForm = false;

SubmittingForm = function () 
{    
     //Validate Statements...
     validForm = true;
     $("#form1").submit();
}

$(document).ready(function () {
$("#form1").validate({
            submitHandler: function (form) {
                if (validForm)
                    $("#form1").submit();
                else
                    SubmittingForm();
            },
            rules: ...
}

Answer 4

使用する必要があります$("form").validate().resetForm();