jQuery Validation plugin email confirmation issue-CodePudding

Anyone has an idea why is not work the email confirmation? I tried the custom function too. Neither built-in equalTo nor my custom built confirmEmail function don't works at all, but everything else works as expected. Even the two email validated but equality is not checked, and the custom built function also never called if I change to:

confirmEmail: {
    required: true,
    confirmEmail: true
},

html:

<input type="text"   id="lastName" name="lastName" placeholder="Last name" required="true" />
<input type="email"  id="email" name="email" placeholder="Email address" required="true" />


<script src="vendor/js/jquery-3.1.1.js"></script>
<script src="vendor/js/jquery.validate.js"></script>  // Query Validation Plugin v1.19.3

js:

$().ready(() => {
    
    const rules = {
        firstName: "required",
        lastName: "required",
        email: {
            required: true,
            email: true
        },
        confirmEmail: {
            required: true,
            equalTo: "#email"
        },
        postCode: "required",
        tnc: "required"
    };
    
    const messages = {
        firstName: "Please enter your first name.",
        lastName: "Please enter your last name.",
        confirmEmail: {
            required: "Please provide your email.",
            equalTo: "Please enter the same email as above."
        },
        postCode: "Please enter your postcode.",
        tnc: "Please accept our policy."
    };
    
    $.validator.addMethod("confirmEmail", function(value, elem) {
        return $("#email").val() == $("#confirmEmail").val();
    }, "Please enter the same email as above.");

    $("#registrationForm").validate(rules, messages);
});

CodePudding user response：

this makes no sense because the first confirmEmail is not the name of any input field shown in your code...

confirmEmail: { // <- ??
    required: true,
    confirmEmail: true
},

This one makes no sense for the same reason as above...

confirmEmail: {  // <- ??
    required: true,
    equalTo: "#email"
},

Correct format:

input_Field_Name: { // <- NAME of the input
    required: true,
    equalTo: "#email",
    confirmEmail: true  // <- NAME of the rule/method
},

And it might make more sense to avoid re-using the same names on fields and rules, in case that's what you're doing.

It also makes no sense to write a custom rule when we have the equalTo rule available.

... function don't works at all, but everything else works as expected. Even the two email validated but equality is not checked, and the custom built function also never called ...

No idea because you did not show enough code to reproduce the problem.

CodePudding user response：

For the confirmEmail inside rules, did try $('#email').val() or $('#email').text()

You can get value or text by ID and verify with equalTo key.