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  quot   bundles jquery quot    RenderSection  quot scripts quot   required  false   In my web config I have   lt appSettings gt      lt add key  quot ClientValidationEnabled quot  value  quot true quot    gt      lt add key  quot UnobtrusiveJavaScriptEnabled quot  value  quot true quot    gt   lt  appSettings gt   In my login cshtml page I have   using  Html BeginForm           lt div class  quot formscontent quot  gt            lt ol gt               lt li gt                   Html LabelFor x   gt  x AgreementNumber                   lt br   gt                   Html TextBoxFor x   gt  x AgreementNumber  new   size    quot 30 quot                      lt br   gt                   Html ValidationMessageFor m   gt  m AgreementNumber                   lt br   gt                   lt br   gt               lt  li gt               lt li gt                   Html LabelFor x   gt  x UserName                   lt br   gt                   Html TextBoxFor x   gt  x UserName  new   size    quot 30 quot                      lt br   gt                   Html ValidationMessageFor m   gt  m UserName                   lt br   gt                   lt br   gt               lt  li gt               lt li gt                   Html LabelFor x   gt  x Password                   lt br   gt                   Html PasswordFor x   gt  x Password  new   size    quot 30 quot                      lt br   gt                   Html ValidationMessageFor m   gt  m Password                   lt br   gt                   lt br   gt               lt  li gt           lt  ol gt        lt  div gt            lt ol gt           lt li gt               Html CheckBoxFor m   gt  m RememberMe               Html LabelFor m   gt  m RememberMe  new    class    quot checkbox quot              lt  li gt       lt  ol gt            lt br   gt            lt input class  quot mainbutton quot  type  quot submit quot  value  quot  Model Localisation TranslateHtmlString  quot LogonBtn quot   quot    gt  lt br   gt       lt div style  quot text-align  left  padding  0 5px 5px 10px  quot  gt          Forgot login-info  clik  lt a class  quot link quot  href  quot  Url Action  quot Index quot    quot Credentials quot   quot  gt here  lt  a gt       lt  div gt          In the bottom of login page   section Scripts      Scripts Render  quot   bundles jqueryval quot      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   lt label for  quot AgreementNumber quot  gt number lt  label gt   lt br   gt   lt input id  quot AgreementNumber quot  name  quot AgreementNumber quot  size  quot 30 quot  type  quot text quot  value  quot 387893 quot    gt   lt br   gt   lt span class  quot field-validation-valid quot  data-valmsg-for  quot AgreementNumber quot  data-valmsg-  replace  quot true quot  gt  lt  span gt   and in this in the bottom   lt script src  quot  BMWebsite Scripts jquery unobtrusive-ajax js quot  gt  lt  script gt   lt script src  quot  BMWebsite Scripts jquery validate inline js quot  gt  lt  script gt   lt script src  quot  BMWebsite Scripts jquery validate js quot  gt  lt  script gt   lt script src  quot  BMWebsite Scripts jquery validate unobtrusive js quot  gt  lt  script gt   My model properties are annotated  public class LogonModel   ModelBase        MyRequired  quot AgreementNumberRequiredProperty quot         MyDisplay  quot AgreementNumberLabel quot        public string AgreementNumber   get  set          MyRequired  quot UserNameRequiredProperty quot         MyDisplay  quot UserNameLabel quot        public string UserName   get  set          MyRequired  quot PasswordRequiredProperty quot         DataType DataType Password        MyDisplay  quot PasswordLabel quot        public string Password   get  set          MyDisplay  quot RememberMeCheckBox quot        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  quot translation quot   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

User · Answer

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.

User · Answer

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

User · Answer

My problem was in web config  UnobtrusiveJavaScriptEnabled was turned off   lt appSettings gt    lt add key  ClientValidationEnabled  value  true    gt    lt add key  UnobtrusiveJavaScriptEnabled  value  false    gt    lt  appSettings gt   I changed to and now works     lt add key  UnobtrusiveJavaScriptEnabled  value  true    gt

User · Answer

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

User · Answer

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                                                                                        lt tr gt    lt div class  form-group  gt      htmlAttributes  new    class    control-label col-md-2            class    form-control                       lt td gt  Html LabelFor model   gt  model NombresUsuario   lt  td gt                              lt div class  col-md-10  gt                     lt td gt                       Html EditorFor model   gt  model NombresUsuario  new   htmlAttributes   new   id    NombresUsuario                            Html ValidationMessageFor model   gt  model NombresUsuario      new    class    text-danger                      lt  td gt

User · Answer

I created this html  lt form action   StudentInfo Edit 2  method  post  novalidate  novalidate  gt  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

User · Answer

section Scripts     lt script src     Scripts jquery validate-vsdoc js  gt  lt  script gt   lt script src     Scripts jquery validate js  gt  lt  script gt   lt script src     Scripts jquery validate min js  gt  lt  script gt   lt script src     Scripts jquery validate unobtrusive js  gt  lt  script gt   lt script src     Scripts jquery validate unobtrusive min js  gt  lt  script gt

User · Answer

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   lt script src    Scripts jquery-1 10 2 min js  gt  lt  script gt   lt script src    Scripts jquery validate min js  gt  lt  script gt   lt script src    Scripts jquery validate unobtrusive min js  gt  lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In Global asax cs  Application Start   method add   DataAnnotationsModelValidatorProvider RegisterAdapter typeof MyRequiredAttribute   typeof RequiredAttributeAdapter

User · Answer

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   gt  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

User · Answer

I ll like to add to this post  that I was experienceing the same issue but in a PartialView   And I needed to add    lt script src    Scripts jquery validate unobtrusive min js  gt  lt  script gt    To the partial view  even if already present in the  Layout view   References    Data Annotations   Validation not working for partial views

User · Answer

Use       Html EditorFor   Instead of        Html TextBoxFor

User · Answer

lt script src   Scripts jquery unobtrusive-ajax js  gt  lt  script gt   lt script src   Scripts jquery validate js  gt  lt  script gt   lt script src   Scripts jquery validate unobtrusive js  gt  lt  script gt    This code worked for me

User · Answer

I had an issue with validation  the form posts then it validates    This Doesn t work with jquery cdn       lt script type  text javascript  src    code jquery com jquery-1 11 0 js  gt  lt  script gt       lt script src    Scripts jquery validate min js  gt  lt  script gt       lt script src    Scripts jquery validate unobtrusive min js  gt  lt  script gt    This Works without jquery cdn   lt script src    Scripts jquery-1 7 1 min js  gt  lt  script gt   lt script src    Scripts jquery validate min js  gt  lt  script gt   lt script src    Scripts jquery validate unobtrusive min js  gt  lt  script gt    Hope helps someone

User · Answer

the line below shows you haven t set an DataAttribute like required on AgreementNumber   lt input id  AgreementNumber  name  AgreementNumber  size  30  type  text  value  387893    gt    you need    Required  public String AgreementNumber get set

User · Answer

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

User · Answer

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

[jquery] MVC 4 client side validation not working

Examples related to jquery

Examples related to asp.net-mvc-4

Examples related to jquery-validate

Examples related to unobtrusive-validation