對動態生成的表單使用jQuery表單驗證equalTo規則

Question

我在一頁上有n個表格。 每個都有兩個電子郵件地址字段（普通字段和驗證）。 我要為兩個字段設置一個equalTo規則。 我現在正在做的是這樣的：

$(".contactform").validate({
   onsubmit: true,
   onkeydown: false,
   onkeyup: false,
   onfocusin: false,
   onfocusout: false,
   onchange: false,
   onclick: false,
      rules: {
         email_veri: {
            equalTo: ".email"
         }
      }
});

但這顯然不起作用，因為每種形式的email和email_veri的ID都不同。 我讀到可以直接在字段上設置驗證規則，但我沒有找到具體方法。 我希望有人能幫幫忙。

Answer 1

這可能很有用，它來自http://www.epalla.com/2009/12/jquery-validation-with-multiple-forms/上的 “具有多個（大部分）相同表單的jQuery驗證”

他們的答案是分別驗證每種形式：

$(".question_form").each(function() {
    $(this).validate(
        rules: {
            email_veri: {
                equalTo: ".email"
        }
    );
});

Answer 2

Hiya為您創建了一個非常簡單的演示： http : //jsfiddle.net/bY5P6/

因此，如果您鍵入不同的電子郵件和電子郵件驗證字段，那么您將獲得equal to消息驗證相同的效果。

進一步的文檔： http : //docs.jquery.com/Plugins/Validation/Methods/equalTo

或用於多個表單，請參見此處：使用JQuery驗證插件來驗證具有相同名稱的多個表單字段

如果您使用多種表格，請確保引用：

驗證要求字段名稱必須唯一，但單選按鈕和復選框除外。

:)！

jQuery代碼

//================================= AZIONE FORM
$('#submit').click(function() {
    $('#mailer').submit();
    return false;
});

//================================= VALIDAZIONE FORM
$('#mailer').validate({
    focusInvalid: false,
    debug: true,
    rules: {
        name: {
            required: true
        },
        email_address: {
            required: true,
            email: true
        },
        email_address_veri: {
            required: true,
            email: true,
            equalTo: ".email"
        },
        request: {
            required: true
        }
    },
    messages: {
        name: {
            required: 'name required'
        },
        email_address: {
            required: 'email required',
            email: 'email address is not valid'
        },
        email_address_veri: {
            required: 'email required',
            email: 'email address verification is not valid',
            equalTo: "Please enter the same email as above"
        },
        request: {
            required: 'request required'
        }
    }
});

的HTML

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <form action="#" method="post" id="mailer" autocomplete="off">
            <label>
                <span>name</span>
                <input type="text" name="name" required="required" value="" />
            </label><br /><br />
            <label>
                <span>email</span>
                <input type="email" name="email_address" class="email"  value="" />
            </label><br /><br />
            <label>
                <span>email Verification</span>
                <input type="email" name="email_address_veri"  value="" />
            </label><br /><br />
            <label>
                <span>request</span>
                <textarea name="request" required="required"></textarea>
            </label><br /><br />
            <a href="javascript:;" id="submit">submit</a>

        </form>

    </body>
</html>

輸出量

在此處輸入圖片說明

對動態生成的表單使用jQuery表單驗證equalTo規則

問題描述

2 個解決方案

解決方案1
2 已采納 2012-04-25 01:54:34

解決方案2
1 2012-04-25 01:25:38

對動態生成的表單使用jQuery表單驗證equalTo規則

問題描述

2 個解決方案

解決方案1 2 已采納 2012-04-25 01:54:34

解決方案2 1 2012-04-25 01:25:38

解決方案1
2 已采納 2012-04-25 01:54:34

解決方案2
1 2012-04-25 01:25:38