MVC Jquery Validation Password Confirm not working

Question

Here is the code, I load all Jquery scripts in layout, however, when I type password different from confirm-password. It does not validate after cursor moving out of confirm password field, I don't know why? This is a view in Renderbody

USBBook.Models.RegistrationViewModel
@{
    ViewBag.Title = "Registration";
}
<script type="text/javascript">
    $(document).ready(function () {
        $("CredentialForm").validate ({
            rules: {
                    password: {         required: true,
                                        minlength: 5 }, 

                    confirm-password: {
                                        required: true,
                                        minlength: 5,
                                        equalTo: "#password" }
            },
            messages: {
                    password: {
                                        required: "Please provide password",
                                        minlength: "Password must be at least 5 characters long" },

                    confirm-password: {
                                        required: "Please provide password",
                                        minlength: "Password must be at least 5 characters long",
                                        equalTo: "Please check password" }
            }
        });
    });
</script>
<h2 style="text-align: center">
    Registration</h2>
<h3 style="margin-left: 85px">
    Account Information</h3>
<hr style="width: 70%; margin: 0px 0px 0px 85px" />
@using (Html.BeginForm("Create", "Credential", new { id = "CredentialForm" }))
{
@Html.ValidationSummary(true)
<fieldset>
    @Html.HiddenFor(model => model.AccountID)
    <div class="editor-label">
        <span class="red">*</span>@Html.LabelFor(model => model.Email)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
    </div>
    <div class="editor-label">
        <span class="red">*</span>@Html.LabelFor(model => model.Password)
    </div>
    <div class="editor-field" id="password">
        @Html.EditorFor(model => model.Password)
        @Html.ValidationMessageFor(model => model.Password)
    </div>
    <div class="editor-label">
        <span class="red">*</span>Confirm Password
    </div>
    <input id="confirm-password" class="editor-field" type="password" />
    <p>
        <input class="button" style="margin-left: 55px" type="submit" value="Submit" />
    </p>
</fieldset>

These are scripts which are render in layout:

<script src="../../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

I need to validate password and confirm password field, email is validated by MVC.

Thanks for help

Quan Truong · Accepted Answer · 2013-11-15 03:16:54Z

4

You can do it easy and simple:

In RegistrationViewModel, add namespace System.ComponentModel.DataAnnotations

Add validate attribute for password and confirmpassword

[Required(ErrorMessage = "Password required")]
[StringLength(int.MaxValue, MinimumLength = 6, ErrorMessage = "Password is at least 6 characters.")]
public string Password { get; set; }

[CompareAttribute("Password", ErrorMessage = "Password doesn't match.")]
public string ConfirmPassowrd { get; set; }

And in you razor, using simple, no need to add jquery to handle the confirmpassword

<div class="editor-label">
<span class="red">*</span>@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field" id="password">
   @Html.EditorFor(model => model.Password)
   @Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
<span class="red">*</span>Confirm Password
</div>
<div class="editor-field" id="confirmPassword">
   @Html.EditorFor(model => model.ConfirmPassword)
   @Html.ValidationMessageFor(model => model.ConfirmPassword)
</div>

Hope this help !

answered Nov 15, 2013 at 3:16

Quan Truong

1547 bronze badges

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

3 Comments

new-learner Over a year ago

How about if my model does not have ConfirmPassword attribute? I only need compare Password and ConfirmPassword on the fly, then only password is stored in the database.

Quan Truong Over a year ago

Hi new-learner,the ConfirmPassword just a compare properties and no need to store. If you dont need it, use Jquery event keyup or keydown on ConfirmPassword textbox. It more effectly than $("CredentialForm").validate function.

Junaid Shirwani Over a year ago

This answer is not helpful. The OP wanted to know why his code is not working, not a workaround or a better solution.

Teddy · Accepted Answer · 2013-11-15 02:46:45Z

0

If you added attributes in the class "RegistrationViewModel", the javascript code above is needless.

you'd better to review the native MVC sample, It is really a big treasure for learner.

answered Nov 15, 2013 at 2:46

Teddy

7975 silver badges13 bronze badges

Collectives™ on Stack Overflow

MVC Jquery Validation Password Confirm not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related