MVC 4 client side validation not working

Question

Can anyone tell me why client side validation is not working in my MVC 4 application.

_layout.schtml

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

In my web.config I have:

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

In my login.cshtml page I have:

@using (Html.BeginForm())
{
    <div class="formscontent">

        <ol>
            <li>
                @Html.LabelFor(x => x.AgreementNumber)
                <br />
                @Html.TextBoxFor(x => x.AgreementNumber, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.AgreementNumber)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.UserName)
                <br />
                @Html.TextBoxFor(x => x.UserName, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.UserName)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.Password)
                <br />
                @Html.PasswordFor(x => x.Password, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.Password)
                <br />
                <br />
            </li>
        </ol>

    </div>
    
    <ol>
        <li>
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
        </li>
    </ol>
    
    <br />
    
    <input class="mainbutton" type="submit" value="@Model.Localisation.TranslateHtmlString("LogonBtn")" /><br />
    <div style="text-align: left; padding: 0 5px 5px 10px;">
        Forgot login-info? clik <a class="link" href="@Url.Action("Index", "Credentials")">here.</a>
    </div>
    
}

In the bottom of login page:

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

JavaScript is enabled in my browser. In the MVC 4 template project from Visual Studio client validation works fine.

Running the application, on login page when viewing page source, I see this rendered:

<label for="AgreementNumber">number</label>
<br />
<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />
<br />
<span class="field-validation-valid" data-valmsg-for="AgreementNumber" data-valmsg-  replace="true"></span>

and in this in the bottom:

<script src="/BMWebsite/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.inline.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.unobtrusive.js"></script>

My model properties are annotated:

public class LogonModel : ModelBase
{
    [MyRequired("AgreementNumberRequiredProperty")]
    [MyDisplay("AgreementNumberLabel")]
    public string AgreementNumber { get; set; }

    [MyRequired("UserNameRequiredProperty")]
    [MyDisplay("UserNameLabel")]
    public string UserName { get; set; }

    [MyRequired("PasswordRequiredProperty")]
    [DataType(DataType.Password)]
    [MyDisplay("PasswordLabel")]
    public string Password { get; set; }

    [MyDisplay("RememberMeCheckBox")]
    public bool RememberMe { get; set; }
}

MyRequired is a class derived from the regular RequiredAttribute. The reason is that my error messages are localised by overriding the FormatErrorMessage(string name) method of the RequiredAttribute class. And it works fine - My labels and error messages are localized.

MyRequired.cs

public class MyRequiredAttribute : RequiredAttribute
{
    private readonly string _errorMessagekey;

    public MyRequiredAttribute(string errorMessage)
    {
        _errorMessagekey = errorMessage;
    }

    public override string FormatErrorMessage(string name)
    {
        var translation = HttpContext.Current.Session["translation"] as LocalisationHelper;

        return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
    }
}

I put a breakpoint in the POST version of my login action method, and it is being hit. The form is posted to server where server side validation happens. Client side validation doesn't happen.

What am I missing?

Thank you.

have you overridden the default template by putting something in shared/displaytemplates folder? — politus, Jan 25 '13 at 12:13

score 53 · Answer 1 · answered Jul 01 '13 at 07:18

53

I had the same problem. It seems that the unobtrusive validation scripts were not loaded (see screenshot at the end). I fixed it by adding at the end of _Layout.cshtml

 @Scripts.Render("~/bundles/jqueryval")

The end result:

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   @RenderSection("scripts", required: false)

Except for my pretty standard CRUD views everything is Visual studio project template defaults.

Loaded scripts after fixing the problem: enter image description here

answered Jul 01 '13 at 07:18

Liviu Mandras

6,540
2
41
65

very good shout old boy. I had bundled all of my scripts together and the natural ordering placed the unobtrusive bits above the jqueryval – JDandChips Jul 08 '16 at 09:44
7 years on and it's still not in the boilerplate _Layout.cshtml file! Timeless advice Liviu! – Dezzamondo Mar 08 '20 at 10:10

score 15 · Answer 2 · answered Jan 28 '16 at 09:39

15

Be sure to add this command at the end of every view where you want the validations to be active.

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

answered Jan 28 '16 at 09:39

Lara85

151
1
2

score 12 · Answer 3 · answered Aug 27 '15 at 17:06

12

I finally solved this issue by including the necessary scripts directly in my .cshtml file, in this order:

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

It's a bit off-topic, but I'm continually amazed by how often this sort of thing happens in Web programming, i.e. everything seems to be in place but some obscure tweak turns out to be necessary to get things going. Flimsy, flimsy, flimsy.

answered Aug 27 '15 at 17:06

user1172763

296
1
4
17

1

I have partial view and I need to paste it directly to view, references in layout does not seem to be working. – Maximus Mar 09 '16 at 13:23
I also have partial views. Needed to reference directly in the view to get this working. – Deise Vicentin Aug 19 '16 at 19:08

score 9 · Answer 4 · answered Jul 13 '13 at 07:24

you may have already solved this, but I had some luck by changing the order of the jqueryval item in the BundleConfig with App_Start. The client-side validation would not work even on a fresh out-of-the-box MVC 4 internet solution. So I changed the default:

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

to

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/jquery.unobtrusive*"));

and now my client-side validation is working. You just want to make sure the unobtrusive file is at the end (so it's not intrusive, hah :)

Bundle render scripts in alphabetical order. – Suhail Mumtaz Awan Jul 09 '16 at 09:16 — Suhail Mumtaz Awan, Jul 09 '16 at 09:16

score 9 · Answer 5 · answered Nov 24 '13 at 18:28

9

In Global.asax.cs, Application_Start() method add:

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));

answered Nov 24 '13 at 18:28

saniokazzz

476
1
6
21

2

This was what I was missing when using a custom attribute. Thank you. – RJ Cuthbertson Nov 06 '15 at 17:47

Darin Dimitrov · Answer 6 · 2013-01-25T11:03:00.967

7

There are no data-validation attributes on your input. Make sure you have generated it with a server side helper such as Html.TextBoxFor and that it is inside a form:

@using (Html.BeginForm())
{
    ...
    @Html.TextBoxFor(x => x.AgreementNumber)
}

Also I don't know what the jquery.validate.inline.js script is but if it somehow depends on the jquery.validate.js plugin make sure that it is referenced after it.

In all cases look at your javascript console in the browser for potential errors or missing scripts.

edited Jan 25 '13 at 11:03

answered Jan 25 '13 at 10:56

Darin Dimitrov

1,023,142
271
3,287
2,928

Right there in the first line: `@Scripts.Render("~/bundles/jquery")`, but still worth checking that jquery is actually in the rendered source of the page. – Bennor McCarthy Jan 25 '13 at 10:58

score 7 · Answer 7 · edited Sep 20 '15 at 07:48

7

If you use jquery.validate.js and jquery.validate.unobtrusive.js for validating on client side, you should remember that you have to register any validation attribute of any DOM element on your request. Therefor you can use this code:

$.validator.unobtrusive.parse('your main element on layout');

to register all validation attributes. You can call this method on (for example) : $(document).ajaxSuccess() or $(document).ready() to register all of them and your validation can be occurred successfully instead of registering all js files on cshtml files.

edited Sep 20 '15 at 07:48

TheCodingFrog

3,406
3
21
27

answered Sep 20 '15 at 07:26

Saeed Rajaei

79
1
3

This solution is needed when form is loaded using ajax – Jorr.it Jan 16 '18 at 11:39

score 5 · Answer 8 · answered Nov 01 '16 at 11:06

For me this was a lot of searching. Eventually I decided to use NuGet instead of downloading the files myself. I deleted all involved scripts and scriptbundles and got the following packages (latest versions as of now)

jQuery (3.1.1)
jQuery Validation (1.15.1)
Microsoft jQuery Ubobtrusive Ajax (3.2.3)
Microsoft jQuery Unobtrusive Validation (3.2.3)

Then I added these bundles to the BundleConfig file:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.unobtrusive-ajax.js"));

I added this reference to _Layout.cshtml:

@Scripts.Render("~/bundles/jquery")

And I added this reference to whichever view I needed validation:

@Scripts.Render("~/bundles/jqueryval")

Now everything worked.

Don't forget these things (many people forget them):

Form tags (@using (Html.BeginForm()))
Validation Summary (@Html.ValidationSummary())
Validation Message on your input (Example: @Html.ValidationMessageFor(model => model.StartDate))
Configuration ()
The order of the files added to the bundle (as stated above)

score 4 · Answer 9 · answered May 24 '16 at 10:09

I had an issue with validation, the form posts then it validates,

This Doesn't work with jquery cdn

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

This Works without jquery cdn

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Hope helps someone.

score 3 · Answer 10 · answered Jan 25 '13 at 11:05

3

The reason that the validation data-* attributes aren't showing in the rendered html for your input could be that there is no form context. The FormContext is created automatically when you create a form using @using(Html.BeginForm(...)) { ... }.

If you use a regular html tag for your form, you won't get client-side validation.

answered Jan 25 '13 at 11:05

Bennor McCarthy

11,415
1
49
51

I am NOT using the regular html form tag. My form is rendered using the `Html.BegingForm()` helper. – Javid Jan 25 '13 at 11:25

score 3 · Answer 11 · answered Feb 01 '18 at 12:31

3

My problem was in web.config: UnobtrusiveJavaScriptEnabled was turned off

<appSettings>

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

<add key="UnobtrusiveJavaScriptEnabled" value="false" />

</appSettings>

I changed to and now works:

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

answered Feb 01 '18 at 12:31

ransems

641
7
19

This also, worked for me, I added this to the web.config in the view folder – Hasan Shouman Oct 15 '21 at 14:43

score 3 · Answer 12 · answered Sep 13 '19 at 14:58

this works for me goto your model class and set error message above any prop

[Required(ErrorMessage ="This is Required Field")]
    public string name { get; set; }

import namespace for Required by Ctrl+. and finally add this in view

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

score 2 · Answer 13 · answered Sep 06 '15 at 11:17

2

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

This code worked for me.

answered Sep 06 '15 at 11:17

Sam

29
1

score 2 · Answer 14 · answered Jan 06 '16 at 09:24

In my case the validation itself was working (I could validate an element and retrieve a correct boolean value), but there was no visual output.

My fault was that I forgot this line @Html.ValidationMessageFor(m => ...)

The TS has this in his code and got me on the right track, but I put it in here as reference for others.

score 1 · Answer 15 · answered Jan 25 '13 at 11:01

1

the line below shows you haven't set an DataAttribute like required on AgreementNumber

<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />

you need

[Required]
public String AgreementNumber{get;set;}

answered Jan 25 '13 at 11:01

politus

5,996
1
33
42

1

I have set this DataAnnotation attribute on my model properties. I have a class derived from `RequiredAttribute` – Javid Jan 25 '13 at 11:28
I have edited my question providing more information on this. – Javid Jan 25 '13 at 12:02
1

I removed `MyRequiredAttribute` annotation from the model properties and used the standard `RequiredAttribute` to annotate my model properties and it worked (client side validation worked). When I used `MyRequiredAttribute` this attribute was not rendered in the `` tag: `data-val-required="The Agreement number field is required."`. But I need my error messages localized. How to fix? – Javid Jan 25 '13 at 12:25
3

this is a different question - ask it in a new question – politus Jan 25 '13 at 13:59

score 0 · Answer 16 · answered Nov 08 '16 at 16:27

0

Use:

@Html.EditorFor

Instead of:

@Html.TextBoxFor

answered Nov 08 '16 at 16:27

Mohammad J Uddin Murad

21
1

score 0 · Answer 17 · edited Mar 30 '17 at 13:25

0

I created this html <form action="/StudentInfo/Edit/2" method="post" novalidate="novalidate"> where the novalidate="novalidate" was preventing the client-side jQuery from executing, when I removed novalidate="novalidate", client-side jQuery was enabled and stared working.

edited Mar 30 '17 at 13:25

Gaurav Gandhi

3,041
2
27
40

answered Mar 30 '17 at 12:17

Sachin

1

score 0 · Answer 18 · edited May 23 '17 at 12:34

0

I'll like to add to this post, that I was experienceing the same issue but in a PartialView.

And I needed to add

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

To the partial view, even if already present in the _Layout view.

References:

Data Annotations / Validation not working for partial views

edited May 23 '17 at 12:34

Community

1
1

answered Apr 20 '17 at 15:03

Hugo

2,077
2
28
34

score 0 · Answer 19 · answered Mar 15 '18 at 22:29

Im my case I added and id equals to the name automatically generated for VS on the html and in the code I´ve added a line to that case.

$(function () {
            $.validator.addMethod('latinos', function (value, element) {
                return this.optional(element) || /^[a-záéóóúàèìòùäëïöüñ\s]+$/i.test(value);
            });

            $("#btn").on("click", function () {
                //alert("aa");
                $("#formulario").validate({                    
                    rules:
                    {
                        email: { required: true, email: true, minlength: 8, maxlength: 80 },
                        digitos: { required: true, digits: true, minlength: 2, maxlength: 100 },
                        nombres: { required: true, latinos: true, minlength: 3, maxlength: 50 },
                        NombresUsuario: { required: true, latinos: true, minlength: 3, maxlength: 50 }
                    },
                    messages:
                    {
                        email: {
                            required: 'El campo es requerido', email: 'El formato de email es incorrecto',
                            minlength: 'El mínimo permitido es 8 caracteres', maxlength: 'El máximo permitido son 80 caracteres'
                        },
                        digitos: {
                            required: 'El campo es requerido', digits: 'Sólo se aceptan dígitos',
                            minlength: 'El mínimo permitido es 2 caracteres', maxlength: 'El máximo permitido son 10 caracteres'
                        },
                        nombres: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        },
                        NombresUsuario: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        }
                    }
                });
            });

<tr>@*<div class="form-group">     htmlAttributes: new { @class = "control-label col-md-2" }      , @class = "form-control" }*@
                <td>@Html.LabelFor(model => model.NombresUsuario )</td>

                        @*<div class="col-md-10">*@
                <td>
                    @Html.EditorFor(model => model.NombresUsuario, new { htmlAttributes = new { id = "NombresUsuario" } })
                    @Html.ValidationMessageFor(model => model.NombresUsuario, "", new { @class = "text-danger" })
                </td>

score 0 · Answer 20 · answered Jun 11 '19 at 10:51

0

Ensure that you are using Attributes (e.g. RequiredAttribute) which comes under System.ComponentModel.DataAnnotations namespace

answered Jun 11 '19 at 10:51

Reyan Chougle

4,917
2
30
57

score -2 · Answer 21 · answered Feb 26 '15 at 09:11

  @section Scripts
 {
<script src="../Scripts/jquery.validate-vsdoc.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.min.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.min.js"></script>
}

MVC 4 client side validation not working

_layout.schtml

MyRequired.cs

21 Answers21

Linked