在razor引擎中对html控件进行表单验证

本文关键字：表单 验证 控件 html razor 引擎 | 更新日期: 2023-09-27 18:07:40

我一直面临把表单验证在html控件的问题，任何一个指导我如何解决这个问题?

My HTML Field In 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输入字段变为红色。

在razor引擎中对html控件进行表单验证

好的，所以我想我应该试着帮忙，而不是只是评论。所以我假设您想使用不显眼的验证引擎

如果你这样做

@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文件，看看上面的代码是否被击中?

相关文章：