MVC 4 Client side validation not working

Question

Trying to learn the basics of ASP.net MVC and cant quite understand why my client side validation isnt working.

I have this in both my web.config files (1 is global 1 is in the views folder)

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

I have this in my _layout.cshtmlfile

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")

This is my view model for which im testing registration:

public class RegisterVM
    {
        [Required(ErrorMessage="Username Required")]
        public string username { get; set; }

        [RegularExpression(@"((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20})")]
        [Required(ErrorMessage="Password Required")]
        public string password { get; set; }

        [Compare("password", ErrorMessage="Passwords do not match")]
        public string passwordConfirm { get; set; }
    }

And this is my html

@using(@Html.BeginForm()){

    @Html.LabelFor( model => model.username)
    @Html.EditorFor( model => model.username)
    @Html.ValidationMessageFor( model => model.username)<br />

    @Html.LabelFor( model => model.password)
    @Html.PasswordFor( model => model.password)
    @Html.ValidationMessageFor( model => model.password)<br />

    @Html.LabelFor( model => model.passwordConfirm)
    @Html.EditorFor( model => model.passwordConfirm)
    @Html.ValidationMessageFor( model => model.passwordConfirm)<br />

    <input type="submit" value="Register" />


}

Didn't want to post here, ive read a few topics on here related but cant seem to fix my issues, when i click submit it's making post/get requests.

I can't remember exactly, but is the order of files loaded in ` _layout.cshtmlfile` correct? didn't you missed a js from the first statement, and did you checked the files that has been loaded in browser? — Jahan Zinedine, May 29 '13 at 10:47
Did u try loading validate.min.js before validate.unobtrusive.min.js — Adil, May 29 '13 at 10:52
Yes, the order is wrong. Unobtrusive validation depends on jQuery Validate. — Marcel N., May 29 '13 at 10:55
Fixed, my god spent so long wasting time on this wondering what on earth was wrong, wish I swallowed my pride an just asked!! — Larry, May 29 '13 at 10:56

score 26 · Accepted Answer · answered May 29 '13 at 10:56

26

Feels like this should work, I think you need to load validate.min.js before validate.unobtrusive.min.js

answered May 29 '13 at 10:56

Adil

3,248
1
22
27

Already covered, that was the answer but comments above cant be marked as correct! Thanks – Larry May 29 '13 at 11:18
Yep I commented above but then realized that as answer it could be helpful for others – Adil May 29 '13 at 12:03
Hello, in my view file I set to layout=null and added the order of scripts @Scripts.Render("~/Scripts/jquery.validate.min.js")@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") But the client script is not working, appreciate if you can tell me what else i need to modify? or suggestions. thank you – Benk Nov 18 '14 at 08:41
i also tried using jquery-1.7.1.min.js instead of 2.1.0 but still client side validation is not working, is there maybe a specific version I should be using? – Benk Nov 18 '14 at 08:49
In my case, I noticed some time scaffolding skips adding @Scripts.Render("~/bundles/jqueryval") at the end of layout file, I added it manually and it works. – sairfan Oct 31 '16 at 15:39

Gudradain · Answer 2 · 2017-08-17T14:38:02.667

10

I had a similar problem and the only thing that fixed it was to manually call

 $.validator.unobtrusive.parse($('form'));

before I press the submit button.

I finally put it in document ready callback.

$(function () {
    $.validator.unobtrusive.parse($('form'));
});

edited Aug 17 '17 at 14:38

answered Sep 26 '14 at 15:09

Gudradain

4,653
2
31
40

After trying a lot of solutions without success, this one works very good. Thanks – IFink Feb 04 '16 at 11:20
I noticed this issue after bundling my scripts in BundleConfig.cs and my call to `$('#nameOfForm').validate();` wasn't working. Once i added this line it started working so thanks a lot – Chris Gong Aug 10 '17 at 10:07

score 3 · Answer 3 · answered Jan 01 '14 at 11:02

3

In your page you have these two line in bottom of the page

please See carefully

@section Scripts {
 @Scripts.Render("~/bundles/jqueryval")
}

answered Jan 01 '14 at 11:02

J.B.Vala

301
1
3
10

score 2 · Answer 4 · answered May 29 '13 at 11:21

2

That's because you doesn't load jquery.validate.min.js before the unobtrusive one.

answered May 29 '13 at 11:21

Amin Saqi

18,549
7
50
70

score 0 · Answer 5 · answered Oct 13 '15 at 12:37

$('#divParent').load("url",
                     function () {
                     $.validator.unobtrusive.parse($('form'));}
                );

Note: This is required if you are loading 'form' or 'PartialView' dynamically inside 'div' using ajax calls

score 0 · Answer 6 · answered Nov 06 '16 at 16:20

0

You need just reference these files on every page you need validation my friend!

<script src="~/Scripts/jquery.validate.js"></script>

answered Nov 06 '16 at 16:20

S.Mohamed Mahdi Ahmadian zadeh

2,336
2
17
19

MVC 4 Client side validation not working

6 Answers6

Linked