CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc-4jquery-validate
Java Afca
Java Afca

Reputation: 2237

jquery password validation

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?

Upvotes: 1

Views: 655

Answers (2)

Shiham
Shiham

Reputation: 2184

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"})

Upvotes: 2

ragklaat
ragklaat

Reputation: 946

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.

Upvotes: 0

Related Questions