Client side validation of mvc not working

Question

I am working on a mvc4 project.

Layout page:

<html lang="en">
<head>
<meta charset="utf-8" />
    @Scripts.Render("~/bundles/MainScripts")
    @Scripts.Render("~/bundles/JqueryUIScripts")
    @Styles.Render("~/Content/MainCss")
    @Styles.Render("~/Content/JqueryUICss")
 </head>
 <body>

        @RenderBody()

      </body>
  </html>

Bundle:

        //Script Bundles
        //Basic Scripts
        bundles.Add(new ScriptBundle("~/bundles/MainScripts").Include(
                    "~/Scripts/jQuery1.9.1.js",
                    //"~/Scripts/jquery-1.10.2.js",//For ui and fileupload plugin
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/jquery.validate.unobtrusive.js",
                    "~/Scripts/knockout-3.0.0.js",
                    "~/Scripts/jquery.ui.core.js",
                    "~/Scripts/jquery.ui.widget.js"
            ));
        //Jquery UI Scripts
        bundles.Add(new ScriptBundle("~/bundles/JqueryUIScripts").Include(
            "~/Scripts/jquery-1.10.2.js",
                    "~/Scripts/jquery.ui.effect-slide.js",
                    "~/Scripts/jquery.ui.datepicker.js",
                    "~/Scripts/jquery.ui.effect-drop.js",
                    "~/Scripts/jquery.ui.position.js",
                    "~/Scripts/jquery.ui.menu.js",
                    "~/Scripts/jquery.ui.autocomplete.js"
          ));
        //File Upload Scripts
        bundles.Add(new ScriptBundle("~/bundles/FileUploadScripts").Include(
                    "~/Scripts/file-upload/jquery.fileupload.js",
                    "~/Scripts/file-upload/jquery.fileupload-ui.js",
                    "~/Scripts/file-upload/jquery.iframe-transport.js",
                    "~/Scripts/file-upload/jquery.form.js",
                    "~/Scripts/file-upload/jquery.uploadfile.js",
                    "~/Scripts/jquery.unobtrusive-ajax.js"
          ));

        //Style Bundle
        //Basic Css
        bundles.Add(new StyleBundle("~/Content/MainCss").Include(
            "~/Content/css/inner.css"
            ));
        //Jquery UI Css
        bundles.Add(new StyleBundle("~/Content/JqueryUICss").Include(
            "~/Content/css/jquery.ui.datepicker.css",
            "~/Content/css/jquery.ui.all.css",
            "~/Content/css/jquery.ui.theme.css",
            "~/Content/css/jquery.ui.core.css",
            "~/Content/css/jquery.ui.autocomplete.css"
            ));
        //File Upload Css
        bundles.Add(new StyleBundle("~/Content/FileUploadCss").Include(
            "~/Content/css/uploadfile.css"
            ));

Root web.config:

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

View Model with using System.ComponentModel.DataAnnotations:

 public class EmployeeVM
{
public Int32 EmployeeId { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
}

View passing this 'EmployeeVM':

 @model addsds.Web.ViewModels.EmployeeVM
 @Scripts.Render("~/bundles/FileUploadScripts")
 @Styles.Render("~/Content/FileUploadCss")

@using (Html.BeginForm("Add", "Employee"))
{
   @Html.ValidationSummary(true);
        @Html.Label("First Name", new { @class = "lable" })
        @Html.TextBoxFor(m => m.FirstName, new { @class = "input-box" })
        @Html.Label("Last Name", new { @class = "lable" })
        @Html.TextBoxFor(m => m.LastName, new { @class = "input-box" })
      <input type="submit" name="action:Add" title="" value="Save" class="button">
}

Client side validation is not working...It directs to the controller method when button save is clicked. I want the textbox of FirstName and LastName to have border red when empty before the hit to controller. What am i missing?

just copy generated html output from console and post..and check is there is any errors in console.. — Kartikeya Khosla, Aug 13 '14 at 05:07
TypeError: validator is undefined:" if (validator.settings.rules) {..." from "jquery.validate.min.js". This is the error. I have searched for this error but i dont seem to understand as i did client-side validation before too... just like this and it seemed to have worked. — user3286962, Aug 13 '14 at 05:20
Just check there must be some problem with versions of jquery or just try to reorder jquery files.. — Kartikeya Khosla, Aug 13 '14 at 05:22
just remove 4th jquery file i.e....jquery.unobtrusive-ajax.min.js..and check..and your order of first three js files are correct no need to change them.. — Kartikeya Khosla, Aug 13 '14 at 05:26
I have removed the 4th jquery file...But it is version problem as you pointed out. I am using many plugins in my page requiring different versions of jquery. But even if i change the version to the one required for validation... On server side validation works not client side... — user3286962, Aug 13 '14 at 05:39
Yes...and i think due to different jquery files they are conflicting with one another...try making bundles of js files or use $.noConflict()..you can read more about this in official jquery website.. — Kartikeya Khosla, Aug 13 '14 at 05:41
No. I have changed the version but still client side validation is not working.Any suggestions...regarding why server side validation is working but not client side? — user3286962, Aug 13 '14 at 05:58
just post complete code ,complete view,its layout everything... — Kartikeya Khosla, Aug 13 '14 at 06:00
you are including "~/Scripts/jquery.validate.js", "~/Scripts/jquery.validate.unobtrusive.js", two times in bundle just remove duplicate — Kartikeya Khosla, Aug 13 '14 at 06:15
in MainScripts bundle don't include single jquery file having different versions. — Kartikeya Khosla, Aug 13 '14 at 06:17

Kartikeya Khosla · Accepted Answer · 2014-08-15T03:14:37.777

0

Just Resolve these issues :

1.) Register bundles in global.asax file.

2.) Do not include different versions of same jquery file.

3.) Try to Use $.noConflict() in order to resolve conflicts between different jquery file.Read More here http://api.jquery.com/jquery.noconflict/

edited Aug 15 '14 at 03:14

answered Aug 13 '14 at 06:23

Kartikeya Khosla

18,743
8
43
69

score 0 · Answer 2 · answered Aug 13 '14 at 10:13

You have to add @Html.ValidationMessageFor() for the textboxes which you need validation as below:

@Html.ValidationMessageFor(m => m.FirstName)

@Html.ValidationMessageFor(m => m.LastName)

and also in the post method check whether Modelstate.isvalid() before executing your code.

Client side validation of mvc not working

2 Answers2