jQueryカスタム検証ルール-FieldPresent

このチュートリアルは、jquery.validate.jsプラグインを使用してフォームのカスタム検証ルールを作成する方法を示しており、フォーム検証の設定に関する以前のガイドに拡大します。 これらのルールを定義するために

関数を活用します。 ライブデモが提供され、例には生年月日の検証日の処理日が含まれます。 注：クロスブラウザーの互換性と再帰の問題に対処するパッチバージョンが含まれています。 $.validator.addMethod()

例：

次の例は、名前と電子メールの両方のフィールドが埋め込まれることを保証するカスタム検証ルールを示しています。 一方が満たされている場合、もう一方も同様になければなりません。

左フィールド検証：
• 
正しいフィールド検証：
• 
両方のフィールドのアクション（複数ペア）：
• 

ライブデモ：

（jsfiddleで編集）

jQueryコード（パッチバージョン）：

この改善されたスニペットは、クロスブラウザーの矛盾と再帰の問題を解決します：

html：

// Custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function(value, element, options) {
    var targetEl = $('input[name="' + options.data + '"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    if (!bothEmpty && targetEmpty) {
        setTimeout(function() {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0) {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("<label class='fieldPresentError'>Friend's name and email required.</label>");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
}, "Friend's name and email required.");

$('#myForm').validate({
    onkeyup: true,
    rules: {
        "friend1-name": { "fieldPresent": { data: "friend1-email" } },
        "friend1-email": { "fieldPresent": { data: "friend1-name" } }
    },
    submitHandler: function(form) {
        console.log('passed validation.');
        //submit form handler
    }
});

css：

<form id="myForm">
    <div class="control-group">
        <div class="control-group-inner">
            <label for="friend1-name">Friend's name</label>
            <input type="text" name="friend1-name" />
        </div>
        <div class="control-group-inner">
            <label for="friend1-email">Email Address</label>
            <input type="email" name="friend1-email" />
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

生年月日検証日付（3つの入力）：

.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}

.error {
    border: 1px solid red;
}

label.fieldPresentError {
    color: red;
    display: block;
    margin-top: 5px;
}

このセクションでは、3つの別々のフィールド（日、月、年）を使用して生年月日を検証する方法を示しています。

jqueryに必要な

タグとhtmlファイルにjquery validateプラグインを含めることを忘れないでください。 この拡張されたチュートリアルは、カスタムフォームの検証のためのより堅牢で信頼できるソリューションを提供します。

以上がjQueryカスタム検証ルール-FieldPresentの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。