Home/ Questions/Q 9176711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:10:09+00:00

Having trouble getting jQuery Validate plugin to play nice. Model public class FooVM {

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0