Saturday, February 13, 2016

ASP.NET MVC 5 jQuery validation form.validate() method in external JavaScript file not firing

I have an external JavaScript file that validates a form using form.validate() of jQuery validation plugin.
$(function () {
    
    $("#frmInput").validate({
        submitHandler: function (form) {
            //submit once validation rules are met
            form.submit();           
        },
        .....other codes here
    });
});

When integrating it in an MVC 5 application, the validate event does not trigger. I have checked if there are errors using the Chrome developer tools and Firefox but to no avail there is none. The solution I discovered was to change the BundleConfig.cs file and the order of scripts rendering in _Layout.cshtml. After that, form validation now works.

Steps:
1. Change BundleConfig.cs codes
//change code in BundleConfig.cs From:
 
bundles.Add(new ScriptBundle("~/bundles/jqueryval")
.Include("~/Scripts/jquery.validate*"));
 
//To: (individual bundling of validate and unobtrusive js files)
 
bundles.Add(new ScriptBundle("~/bundles/jqueryval")
.Include("~/Scripts/jquery.validate.min.js"));
 
bundles.Add(new ScriptBundle("~/bundles/jqueryunobtrusive")
.Include("~/Scripts/jquery.validate.unobtrusive.min.js"));

2. Change rendering of scripts code in _Layout.cshtml
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")   
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/RegistrationFormValidation") @* validate form *@
@Scripts.Render("~/bundles/jqueryunobtrusive") 
@Scripts.Render("~/bundles/modernizr") 

Note: There may be other solutions as to why form.validate() does not work. This is just a workaround.

0 comments:

Post a Comment