use jQuery form validation equalTo rule for dynamically generated forms

Question

I have n forms on one page. Each one has two email address fields (normal field and verification). What I want to do is to set a equalTo rule for the two fields. What I am doing now is this:

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

But this is obviously not working as the id of email and email_veri is different in every form. I read that it is possible to set a validation rule directly on a field but I didn't find out how. I hope someone can help.

score 2 · Accepted Answer · edited Apr 25 '12 at 17:14

2

This may be useful, from "jQuery Validation with multiple (mostly) identical forms" at http://www.epalla.com/2009/12/jquery-validation-with-multiple-forms/

Their answer is to validate each form separately:

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

edited Apr 25 '12 at 17:14

Code Maverick

20,171
12
62
114

answered Apr 25 '12 at 01:54

spacekate

46
2

This answer looks really promising, I already tried the "each" but I couldn't get it running. I will try later and let you know. – Philipp Apr 25 '12 at 15:55
This is working for me: ` $(".contactform").each(function() { $(this).validate({ onsubmit: true, onkeydown: false, onkeyup: false, onfocusin: false, onfocusout: false, onchange: false, onclick: false, rules: { email_veri: { equalTo: "#" + $(".emailnormal", this).attr("id") } } }); });` – Philipp Apr 25 '12 at 21:00

Tats_innit · Answer 2 · 2017-08-21T01:52:58.703

Hiya Created a very simple demo for you: http://jsfiddle.net/bY5P6/

SO if you will type different email and email verification field then you will get equal to message validation.

further documentation for it: http://docs.jquery.com/Plugins/Validation/Methods/equalTo

or for multiple forms please see here: Using JQuery Validate Plugin to validate multiple form fields with identical names

In case you are working with multiple forms please make sure quote :

validation requires field names to be unique except for radio buttons and check boxes.

:) !

Jquery Code

//================================= 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>

Output

enter image description here

Thank you for your **GREAT** answer but I guess you read the question wrong, this is just for one form, but I have multiple forms on my page. — Philipp, Apr 25 '12 at 15:53

use jQuery form validation equalTo rule for dynamically generated forms

2 Answers2