36

Having trouble getting jQuery Validate plugin to play nice.

Model

public class FooVM { [Required] public string Name { get; set; } }

Layout

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="@Url.Content("~/scripts/jquery-1.9.0.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/scripts/jquery-migrate-1.0.0.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/scripts/bootstrap.min.js")" type="text/javascript"></script> <link href="@Url.Content("~/content/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/content/bootstrap.min.css")" rel="stylesheet" type="text/css" /> <title>@ViewBag.Title</title> </head> <body> <div class="container"> <div class="row"> <div class="span12"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">idoneit</a> <ul class="nav"> <li class="menu-link">@Html.ActionLink("Home", "index", "bar")</li> </ul> </div> </div> </div> <div class="span12 error-container"> </div> <div class="span12 main-body"> @RenderBody() </div> </div> </div> </body> </html>

View

model bootstrapvalidate.Models.FooVM @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @using (Html.BeginForm("add", "bar", FormMethod.Post, new { @class = "form-horizontal" })) { <fieldset> @Html.ValidationSummary() <legend>Testing Bootstrap & Validate</legend> <div class="control-group"> <label for="Name" class="control-label">Name</label> <div class="controls"> @Html.TextBoxFor(x => x.Name) </div> <button type="submit" class="btn">Add!</button> </div> </fieldset> }

When I submit, the error message is briefly shown and then the form posts back anyway.

One thing I have noticed which I have not seen before is that the markup contains the 'novalidate' attribute

<form action="/bar/add" class="form-horizontal" method="post" novalidate="novalidate">

From the bits I have read, this is HTML5 attribute that prevents validation. So yeah, this is what is causing it I assume.

Question is - why the bejesus is it being added to the form? I've not asked for it!

edit: did a bit of digging based on @rob 's answer, it seems jquery validate is throwing an exception, hence the postback..

Debugging Outcome

this is jquery.validate 1.10

Improve this question
1
  • 3
    As per the plugin's page, version 1.10 has only been tested up through jQuery 1.8.
    – Sparky
    CommentedJan 21, 2013 at 18:29

5 Answers 5

Reset to default
33

The novalidate attribute is added by jquery.validate line 32:

// Add novalidate tag if HTML5. this.attr('novalidate', 'novalidate');

If you are using HTML5, then remove the attribute:

$("#contactForm").validate(); $("#contactForm").removeAttr("novalidate");

In your web.config, make sure you have:

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

Also make sure they are not commented out.

Improve this answer
3
  • Good shout - but they are both there, and not commented out
    – glosrob
    CommentedJan 21, 2013 at 12:23
  • 9
    To clarify, my understanding is the novalidate is supposed to be there to turn off HTML5 validation, because you don't want both HTML5 validation(implemented in the browser) and jQuery validation to both be trying to validate the form, as they will produce duplicate error popups that will be messy.
    – AaronLS
    CommentedOct 27, 2014 at 21:25
  • 1
    Aaron's comment is the true answer to "why" novalidate is added. It's a bit deceptive because it sounds like you're disabling validation, but you're just disabling it in the browser which allows jquery to pick it up to handle it instead. This allows for a more consistent experience across browsers (since each browser may handle it slightly different) and JQuery's (err your) implementation is likely to be done a lot better (e.g showing all validation issues instead of doing one at a time)
    – Adam Plocher
    CommentedFeb 8, 2018 at 23:15
6

From a quick scan and reading through previous comments, I am noticing that if you have the data-val=true attribute on any of the items in the form, the novalidate property will automatically be inserted by jquery.validate.

This makes sense because if you are using those attributes then there is something that you do not intend to go through validation, hence the novalidate attribute; however, by reading up on the html5 novalidate property on w3schools, you can overwrite the default novalidate; the new jquery.validate script must account for this.

I think that's the skinny, let me know if anyone agrees.

Improve this answer
    6

    This was really a poorly worded question on my part I think.

    Essentially the issue was not the novalidation attribute at all (as @robasta said).

    I couldn't get jQuery 1.9 and jQuery.Validate 1.10 to play nicely. Switching back to jQuery 1.83 fixed it straight away, all working as I'd expect.

    Improve this answer
    5
    • 1
      Version 1.10 has only been tested up through jQuery 1.8.x
      – Sparky
      CommentedJan 21, 2013 at 18:29
    • Will teach me to be more thorough before playing about, I only really wanted to try out Boostrap :)
      – glosrob
      CommentedJan 21, 2013 at 20:45
    • you'd better report a bug, it helped me (and i hope many others) with one photo gallery
      – vladkras
      CommentedJun 29, 2013 at 10:28
    • i wonder if jquery 1.10 + the jquery migration plugin is supported? i'm about to find out...
      – Randy L
      CommentedSep 3, 2013 at 21:18
    • I've just experienced this issue with jQuery.validate v1.14 so looks to still be an issue. Solution remains to not upgrade jQuery beyond 1.8.3 (disappointing)
      – Sambo
      CommentedNov 9, 2015 at 11:42
    1

    change

    // Add novalidate tag if HTML5. this.attr('novalidate', 'novalidate');

    to

    // Add novalidate tag if HTML5. if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate');
    Improve this answer
      -2

      for default jquery form validations add this attribute in Html.BeginForm @novalidate=""

      Improve this answer

        Start asking to get answers

        Find the answer to your question by asking.

        Ask question

        Explore related questions

        See similar questions with these tags.