Client-side validation in ASP.NET MVC project is not validating the rules

Question

I am using the following JS.fiddle of client-side validation within my project. I have implemented this example as my javascript. http://jsfiddle.net/rtglenn/VwPaR/

Currently, the fields are highlighting green when active and staying green. However, they are not displaying red if one of the rules is broken.

Here is my View:

@using (Html.BeginForm()
{ 
<div class="form-horizontal">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group has-feedback">
        <div class="float:left"> 
            @Html.Label("First Name:", htmlAttributes: new { @class = "control-label col-md-2", @for = "fname" })
            <div class="col-md-3">
                 @Html.EditorFor(model => model.Person.fName, new { htmlAttributes = new { @class = "form-control" }, name = "fname", id = "fname" })
                 @Html.ValidationMessageFor(model => model.Person.fName, "", new { @class = "text-danger" })
            </div>
        </div>

Any help on this issue would be greatly appreciated. I have checked that my referenced scripts are in the correct order.

I copied the same Javascript I used and the above View code to an empty ASP.NET MVC project and the validation works perfectly. So I'm not sure what the issue is when I use this code in my project. — fuzzi, Sep 03 '15 at 21:20
yeah, I see.. I had to re-read your question.. so the jsfiddle is not the output of your page?.. what is the compiled output? — Brett Caswell, Sep 03 '15 at 21:24
where is your `@Html.ValidationMessageFor(model => model.Person.fName)`? — JamieD77, Sep 03 '15 at 21:26
The JSFiddle is not the output, it is the example that I used for my project. I have added a ValidationMessageFor. However, the box still highlights green even if the rules are broken (i.e. if 1 character is entered for the field). — fuzzi, Sep 03 '15 at 21:30
i feel like you're using the javascript validation approach when there's really no need. you can use data annotations and unobtrusive jquery validation — JamieD77, Sep 03 '15 at 21:35
@fuzzii, look at the source of the page/view.. is the `name` attribute of the `input` (editor) for **First Name**, what you expect it to be (i.e. `fname`)?? — Brett Caswell, Sep 03 '15 at 21:39
using lowercase `name = "fname"` doesnt do anything.. you need to use proper case `Name = "fname"` — JamieD77, Sep 03 '15 at 21:41
no.. it isn't then.. .it's `Person.fname` .. that's the name of your input, and that should be the name of your rule — Brett Caswell, Sep 03 '15 at 21:41
I'm new to client-side validation, so been stuck on it for a few days now. Hopefully I can get something to work. Thank you JamieD77 for the dotnetfiddle, I will try out your solution and see if I can get it working :) — fuzzi, Sep 03 '15 at 21:43
your editorfor additionalviewdata syntax is off a little.. you have to use this if you want to change the name and id field `@Html.EditorFor(model => model.Person.fName, new { htmlAttributes = new { @class = "form-control" , Name = "fname", id = "fname" }})` — JamieD77, Sep 03 '15 at 21:46
@JamieD77 THANK YOU!!! This has actually fixed the issue! Didn't realize it was a syntax issue. — fuzzi, Sep 03 '15 at 21:49
What are you doing changing the `name` attribute of the control! That means binding will fail! Never change the `name` attribute — , Sep 03 '15 at 22:18

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Look at the output of @Html.EditorFor(model => model.Person.fName, new { htmlAttributes = new { @class = "form-control" }}), your input name attributes are being assigned the values Person.fName and Person.lName, respectfully.

Your rules need to correlate to those name values.

 rules: {
            "Person.fName" : {
                minlength: 3,
                maxlength: 15,
                    required: true
                },
            "Person.lName" : {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },

for visual feedback, add this to your css:

.form-control.has-error input,
.has-error input 
{
    background-color:red;
    color:white;
}

Of course, there are alternative validation frameworks and methodologies. One of which ships with MVC: Unobtrusive Client Validation in ASP.NET MVC 3 (older post).

Related SO Q&A: What is jQuery Unobtrusive Validation?

Thank you, although this does not fix the issue. – fuzzi Sep 03 '15 at 21:23 — fuzzi, Sep 03 '15 at 21:23

Client-side validation in ASP.NET MVC project is not validating the rules

1 Answers1