3

我一直面临将表单验证放在 html 控件上的问题，任何人指导我如何解决这个问题？

我的 HTML 字段在 something.cshtml 中

<input type="text" id="AccidentDate" name="AccidentDate" />
@Html.ValidationMessage("AccidentDate")

控制器代码：

 [HttpPost]
 [AllowAnonymous]
 public ActionResult Index(Models.c objC)
 {
     if (String.IsNullOrEmpty(objC.AccidentDate))
     {
         ModelState.AddModelError("AccidentDate", "*");
     }

     return View(objClaimant);
  }

请注意，validationMessage 确实会在该输入字段前面以 * 的形式引发错误，但我的要求是将该输入字段突出显示为红色。

最重要的是我知道我是否使用： @Html.TextBox("AccidentDate", Model.AccidentDate);它可以完美运行，但使用它不是我的要求。

最后，如果出现验证消息，我希望通过任何其他方式使 html 输入字段变为红色。

任何帮助，将不胜感激。

4

1 回答 1

1

好的，所以我想我会尝试提供帮助，而不是仅仅发表评论。所以我假设你想使用不显眼的验证引擎

所以如果你这样做

@Html.TextBox("AccidentDate", Model.AccidentDate);

并查看源代码，您会看到如下内容：

<input data-val="true" data-val-required="The AccidentDate field is required." 
   id="AccidentDate" name="AccidentDate" type="text" value="">

所以要注意的重要一点是data-val属性。这些基本上告诉不显眼的引擎，“这个字段需要验证，如果失败，这就是显示的方式和内容”

因此，要做到这一点，没有@Html.TextBox 它会为您完成所有这些，您需要自己在 HTML 中创建这些属性。

快速一个肮脏的解决方案，把你@HTML.TextBox的，运行你的代码剪切和粘贴 HTML。可能不是你想要的？

编辑 你想要所需的验证，所以上面的data-val="true" data-val-required="The AccidentDate field is required."属性就是你需要的，显然替换你自己的错误信息

所以：

<input type="text" id="AccidentDate" name="AccidentDate" 
   data-val="true" data-val-required="The AccidentDate field is required." />
@Html.ValidationMessage("AccidentDate")

CSS类

应该应用 Css 类。相关的代码是：

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);

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

里面jquery.validate.unobtrusive.js。确认你引用了这个js文件，看看上面的代码是否被命中？

于 2013-04-05T11:52:24.493 回答