我使用html5 / Razor / MVC3利用Bootstrap模板从Twitter。我想有表面验证,看起来像光滑,他们已经记录(
http://twitter.github.com/bootstrap/#forms)。所以,如果我们看看如何标准的锅炉板MVC3帐户注册,标记将看起来像:
@using (Html.BeginForm("Register","Account",FormMethod.Post,new { @class="form-stacked" })) { @Html.ValidationSummary(true,"Snap! Something went wrong") <div> <fieldset> <legend>Account Information</legend> <div class="clearfix error"> @Html.LabelFor(m => m.UserName) <div class="input"> @Html.TextBoxFor(m => m.UserName) <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName)</span> </div> </div> <div class="clearfix"> @Html.LabelFor(m => m.Email) <div class="input"> @Html.TextBoxFor(m => m.Email) <span class="help-inline">@Html.ValidationMessageFor(m => m.Email)</span> </div> </div> <div class="clearfix"> @Html.LabelFor(m => m.Password) <div class="input"> @Html.PasswordFor(m => m.Password) <span class="help-inline">@Html.ValidationMessageFor(m => m.Password)</span> </div> </div> <div class="clearfix"> @Html.LabelFor(m => m.ConfirmPassword) <div class="input"> @Html.PasswordFor(m => m.ConfirmPassword) <span class="help-inline">@Html.ValidationMessageFor(m => m.ConfirmPassword)</span> </div> </div> </fieldset> <div class="actions"> <button class="btn large primary" type="submit">Register</button> </div> </div>
我想做的是让容器div注入“错误”类,就像我在第一个输入硬编码。 (因此在进入页面时,div将有一个“clearfix”类,但如果该输入块验证失败,则会将其标记为“clearfix错误”)。我想我将不得不更新div块以包括某种类型的ID,并可能添加一个新的数据属性到ValidationMessage。我没有扩展ValidationMessageFor帮助器的问题。我只是不是100%肯定的方法应该是扩展的库在那里。任何建议如何解决这个问题?
TIA。
更新:
我认为这种方法是合理的:
<div id="UserNameContainer" class="clearfix error"> @Html.LabelFor(m => m.UserName) <div class="input"> @Html.TextBoxFor(m => m.UserName) <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName,null,new { @data_container = "UserNameContainer" })</span> </div> </div>
解决方法
$ .validator.setDefaults方法通过Bootstrap从Twitter解决了这个问题。我使用jquery.validate.js和jquery.validate.unobtrusive.js。
由于对DOM准备进行不显眼的验证扫描您的文档并为其遇到的每个表单缓存不显眼的验证选项,因此需要在文档扫描发生之前调用$ .validator.setDefaults方法。
// setup defaults for $.validator outside domReady handler $.validator.setDefaults({ highlight: function (element) { $(element).closest(".clearfix").addClass("error"); },unhighlight: function (element) { $(element).closest(".clearfix").removeClass("error"); } }); $(document).ready(function() { // do other stuff });