Menu
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..
this is jquery.validate 1.10
903
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.
163
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.
45
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.
5
change
// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');
to
// Add novalidate tag if HTML5.
if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
