Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
535 views
in Technique[技术] by (71.8m points)

asp.net mvc - Why is <form> being given NoValidate attribute?

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...