ASP MVC4+JQuery validation doesn't work

Question

I've follow the steps in the Internet to set up the validation for the password.

I'm using ASP.NET MVC4+razor+jquery, but the validation seems not work.Here are my codes:

CSHTML:

@using (Html.BeginForm("Index","Home",FormMethod.Post,new { id="resetForm"}))
{

    <ol class="round">
    <li class="one">
        <h5>Select the Application.</h5>
        @model PWDManagementCenter.Models.UserApplicationModels

        @Html.DropDownListFor(x => x.selectedUserApp, Model.userApps)
    </li>

    <li class="two">
        <h5>Input Login ID of Application</h5>
        <input name="txtLogonId"   />
    </li>

    <li class="three">
        <h5>Input the new password</h5>
        <input id="txtPwd" name="txtPwd" type="password" />
        <h6>Retype the password</h6>
        <input id="txtPwd2" name="txtPwd2" type="password" /><p />
        <input id="btnSubmit" type="submit" value="Save" />
    </li>
</ol>
}

JS in html:

<script src="/Scripts/jquery-1.7.1.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.js" type="text/javascript" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#resetForm').validate({
            rules: {
                txtPwd: {
                    require: true, minlength: 6, maxlength: 20
                },
                txtPwd2: {
                    require: true, equalTo: '#txtPwd', minlength: 6, maxlegth: 20
                }
            },
            messages: {
                txtPwd: {
                    require: "Password is required!",
                    minlength: "Password contains at least 6 characters",
                    maxlength: "Password contains at most 20 characters"
                },
                txtPwd2: {
                    equalTo: "Make sure input the same password as above"
                }
            }
        });


</script>

And the controller:

[HttpPost]
        public ActionResult Index(UserApplicationModels model)
        {
            string appName = model.selectedUserApp;
            string id = Request.Form["txtLogonId"];
            string newPwd = Request.Form["txtPwd"];
            string newPwd2 = Request.Form["txtPwd2"];

            ......
        }

When I click the submit button in debug mode, it jump to this Index function without validation.

Why? Anything I missed? Please help.

I follow this simple validation demo

Thanks to those who answered the question. You gave me the hits to solve the problem.

1. The script tab should end with "</script>" rather than " /> " So this "<script src="/Scripts/jquery.validate.js" type="text/javascript" />" can't work but this "<script src="/Scripts/jquery.validate.js" type="text/javascript" ></script>" works

2. After 1, I got an runtime error, saying that "jscript runtime error object doesn't support this property or method" This is because we include jquery twice.

After 1,2 , validation is normal.

Answer 1

1. Unless the code you OPed was pasted in error, your brackets/parenthesis are mis-matched. The document.ready() function isn't closed properly - you're missing closing });

2. it's required not "require"

   $('#resetForm').validate({
           rules: {
               txtPwd: {
                   required: true, minlength: 6, maxlength: 20
               },
               txtPwd2: {
                   required: true, equalTo: '#txtPwd', minlength: 6, maxlegth: 20
               }
           },
           messages: {
               txtPwd: {
                   required: "Password is required!",
                   minlength: "Password contains at least 6 characters",
                   maxlength: "Password contains at most 20 characters"
               },
               txtPwd2: {
                   equalTo: "Make sure input the same password as above"
               }
           }
       });
   

Answer 2

You seem to be writing the jquery validation scripts manually and not relying on the unobtrusive jquery validation which is built into ASP.NET MVC. If this is the case make sure that the jquery.validate.unobtrusive script is never referenced in your page. Also in ASP.NET MVC 4 internet template there's a ~/bundles/jqueryval bundle containing this script, so make sure that you have never included it in your page or Layout.

All you need are the jquery and jquery.validate scripts. Also checkout your javascript console to ensure that there aren't any errors.