jquery password validation

Question

On my view i have 2 password fields:

   @Html.PasswordFor(m => m.Password)<br />
   @Html.PasswordFor(m => m.ConfirmPassword)<br />

Now i am looking for a way to use my javascript function below on these two fields.

function addCustomMessages() {
    $("#password_confirm").rules("add", {
        required: true,
        equalTo: "#password",
        messages: {
            required: "Herhaal uw wachtwoord",
            equalTo: "Enter the same password as above"
        }
    });
}

How can i tell @Html.PasswordFor(m => m.ConfirmPassword) it needs t use #password-confirm

EDIT:

View:

                   @Html.PasswordFor(m => m.Password, new { @id="password", @class = "equalTo" })<br />
                   @Html.PasswordFor(m => m.ConfirmPassword, new { @id="password_confirm", @class = "equalTo" })<br />

Javascript:

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: NL (Dutch; Nederlands, Vlaams)
 */
(function ($) {
    $.extend($.validator.messages, {
        required: "Dit is een verplicht veld.",
        remote: "Controleer dit veld.",
        email: "Vul hier een geldig e-mailadres in.",
        url: "Vul hier een geldige URL in.",
        date: "Vul hier een geldige datum in.",
        dateISO: "Vul hier een geldige datum in (ISO-formaat).",
        number: "Vul hier een geldig getal in.",
        digits: "Vul hier alleen getallen in.",
        creditcard: "Vul hier een geldig creditcardnummer in.",
        equalTo: "Vul hier dezelfde waarde in.",
        accept: "Vul hier een waarde in met een geldige extensie.",
        maxlength: $.validator.format("Vul hier maximaal {0} tekens in."),
        minlength: $.validator.format("Vul hier minimaal {0} tekens in."),
        rangelength: $.validator.format("Vul hier een waarde in van minimaal {0} en maximaal {1} tekens."),
        range: $.validator.format("Vul hier een waarde in van minimaal {0} en maximaal {1}."),
        max: $.validator.format("Vul hier een waarde in kleiner dan of gelijk aan {0}."),
        min: $.validator.format("Vul hier een waarde in groter dan of gelijk aan {0}."),

        // for validations in additional-methods.js
        iban: "Vul hier een geldig IBAN in.",
        dateNL: "Vul hier een geldige datum in.",
        phoneNL: "Vul hier een geldig Nederlands telefoonnummer in.",
        mobileNL: "Vul hier een geldig Nederlands mobiel telefoonnummer in.",
        postalcodeNL: "Vul hier een geldige postcode in.",
        bankaccountNL: "Vul hier een geldig bankrekeningnummer in.",
        giroaccountNL: "Vul hier een geldig gironummer in.",
        bankorgiroaccountNL: "Vul hier een geldig bank- of gironummer in."
    });

    function addCustomMessages() {
        $("#password_confirm").rules("add", {
            required: true,
            equalTo: "#password",
            messages: {
                required: "Herhaal uw wachtwoord",
                equalTo: "Enter the same password as above"
            }
        });
    }

}(jQuery));

still not working for me, someone who can help me with it?

See the edited answer please. Do not for to accept if it helped you :) — Shiham Sham
– Shiham Sham, Commented May 28, 2013 at 10:34
@nvrtheless still not showing me a equalTo error message when i use different passwords — Java Afca
– Java Afca, Commented May 28, 2013 at 10:48

Shiham Sham · Accepted Answer · 2013-05-28 10:33:04Z

2

When you use html helpers it will generate a <input> tag for you when cshtml parsed to html. So using #password_confirm as ID is not correct. If you want "password_confirm" to be ID of your input tag, then specify using an HTML attribute in HTML helper.

For example:

@Html.PasswordFor(m => m.ConfirmPassword, new{id="password_confirm"})

edited May 28, 2013 at 10:33

answered May 28, 2013 at 10:02

Shiham Sham

2,1941 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ragklaat · Accepted Answer · 2013-05-28 10:05:26Z

0

You can add several attributes to the field in HTML, like this:

@Html.PasswordFor(c => c.Password, new { id = "password-confirm"})

This case the id of the field should be password-confirm.

answered May 28, 2013 at 10:05

ragklaat

9665 silver badges12 bronze badges

Collectives™ on Stack Overflow

jquery password validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related