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.

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
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.

Have you considered Unobtrusive Validation (bradwilson.typepad.com/blog/2010/10/…)? Doesn't answer your question, but makes handling client and server validation incredibly easy. — moribvndvs
– moribvndvs, Commented Nov 21, 2012 at 5:22
It's not what I want. Please refer to my demo link. It's simple and pure jquery. That's what I want — macemers
– macemers, Commented Nov 21, 2012 at 5:25
I understand what you want, just an FYI. UV uses jQuery and jQuery Validation, it just augments jQuery Validation so you don't have to do the manual wireup you're struggling with now. — moribvndvs
– moribvndvs, Commented Nov 21, 2012 at 5:28

EdSF · Accepted Answer · 2012-11-21 06:56:54Z

2

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

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

answered Nov 21, 2012 at 6:56

EdSF

12.5k6 gold badges45 silver badges85 bronze badges

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

Comments

Darin Dimitrov · Accepted Answer · 2012-11-21 06:40:58Z

1

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.

answered Nov 21, 2012 at 6:40

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

4 Comments

macemers Over a year ago

I only include jquery and jquery.validate, never include unobtrusive. Any idea?

Darin Dimitrov Over a year ago

Then this should work assuming you do not have some javascript errors. Did you look at the javascript console? Did you look at the network tab of your javascript debugging tool to ensure that there are no 404 errors when referencing the scripts? Did you ensure that no bundle is ever referenced in your view or in your Layout?

macemers Over a year ago

What do you mean by "no bundle is ever referenced in your view or in your Layout?". BTW where to see the javascript console in vs2010?

Darin Dimitrov Over a year ago

@user838204, there's no javascript console in VS. It's in your browser. For example if you are using FireFox you could use FireBug.

Collectives™ on Stack Overflow

ASP MVC4+JQuery validation doesn't work

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related