client side unobtrusive validation

Question

Server side validation works fine(once i submit the form) but client side doesnt work.

In my layout :

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

bundle:

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

In my config file:

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

I am using Data annotations in my model & MVC 5

VM:

    public class LocationWorkingHoursVM 
{
    public int LocationID { get; set; }
    public string Name { get; set; }
    [Range(0,1)]
    public decimal?[] Hours { get; set; }
    public string BankHolidays { get; set; }     
}

It is rendered as :

<input class="form-control" data-val="true" data-val-number="The field Nullable`1 must be a number." id="Hours_0_" name="Hours[0]" type="text" value="8.0" />
            <span class="field-validation-valid" data-valmsg-for="Hours" data-valmsg-replace="true"></span>

What am i missing?

Is there any error of missing scripts on your console? (FF or Chrome). And your data annotations have any required message with an error message? — Jorge F, Jul 04 '14 at 15:26
No errors in console, no messages. However i just noticed that i get client validation for the type of fields. E.g. if i start typing characters in an int field it will turn to red. — den, Jul 04 '14 at 15:30
If it's turning to red that means is doing the validation, if you want validation more precisely, you need to specify that the field is required, if it's required, the validation should stop you from posting something empty or invalid. E.g. [Required(ErrorMessage = "This field is obligatory")] — Jorge F, Jul 04 '14 at 15:35
the client side validation is only working for the the type. E.g. I add the following annotation [Range(0, 1], but its not happening on the client — den, Jul 04 '14 at 15:37
For example atm as soon as i tab out of an numeric box having typed characters. The box will turn red. Is it possible to have the same behaviour having data annotations ? — den, Jul 04 '14 at 15:43
@den There is no issue in Model Class. Which version of jquery and jquery.validate are you using in project? Just make sure if you are using latest version of jquery then must update jquery.validate to latest version. — sanjeev, Jul 05 '14 at 14:43
I use VS2013 so I have updated everything from nuget manager to the latest version — den, Jul 05 '14 at 16:26

score 1 · Answer 1 · answered Jul 05 '14 at 17:12

1

It was because I was using my own template for EditorFor helper. However I had it defined as

TextBoxFor(r=>r.model, new { @class= "foo")})

is it possible to make it work using my template ?

answered Jul 05 '14 at 17:12

den

709
2
7
19

score 0 · Answer 2 · answered Jul 05 '14 at 06:59

Try adding these two lines to your mainlayout and try again

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

If you are using jQuery 1.9.1 or later version just make sure you are using

jQuery Validation (at least 1.11.1) Microsoft jQuery Unobtrusive Validation (at least 2.0.30116.0) Microsoft jQuery Unobtrusive Ajax (at least 2.0.30116.0)

MVC data annotations range validation not working properly

edited May 23 '17 at 12:07

Community

1
1

answered Jul 05 '14 at 14:49

sanjeev

1,407
2
18
30

client side unobtrusive validation

3 Answers3