Question

我正在使用bootstrap CSS表单样式，当文本框收到验证错误消息时，我需要将类“错误”放在容器上。我怎么能这样做？

问题是，在提交表单之前，所有验证都会在ajax上触发，但我的自定义验证器只会在帖子上触发。所以需要确保两种情况都发生。

http://twitter.github.com/bootstrap/base-css.html#forms

Answer 1

在jquery.validate.unobtrusive中的onError函数内，只需添加.addClass("error")行，如下所示：

function onError(error, inputElement) {  // 'this' is the form element
  var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
      replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

  container.removeClass("field-validation-valid").addClass("field-validation-error");
  error.data("unobtrusiveContainer", container);
  container.parents(".field-encapsulator:first").addClass("error");

  if (replace) {
    container.empty();
    error.removeClass("input-validation-error").appendTo(container);
  }
  else {
    error.hide();
  }
}

Answer 2

ASP.NET MVC将field-validation-error类添加到错误消息元素中，并input-validation-error通过javascript在服务器端和客户端上形成控件。没有包含元素，根据您的代码，表单控件及其标签可能在也可能不在同一个包含元素下。而且，即使它们这样做，MVC也会将提到的类设置为表单控件和错误消息元素，而不是包含元素。

此外，当您使用Html.EditorForModel()自动生成表单时，生成的标记如下所示：

<div class="editor-label"><label for="foo">Foo</label></div>
<div class="editor-field"><input name="foo"/></div>

没有包含元素可以映射到Twitter Bootstrap上的control-group类。您可以通过添加EditorTemplates/Object.cshtml模板来更改此模板。

我建议你让Twitter Bootstrap适应ASP.NET MVC，而不是相反。

Answer 3

如 How to add a 'submitHandler' function when using jQuery Unobtrusive Validation? 的一些答案所述，设置可以通过 $("form").data("validator").settings 访问。

然后你可以设置任何你喜欢的有效/无效的类：

var settings = $("form").data("validator").settings;
settings.errorClass += " is-invalid";
settings.validClass += " is-valid";

ASP.NET MVC验证将类添加到包含div

3 个答案: