sitefinity 验证数据视图

Question

我正在构建这个 MVC 表单，而不是使用 sitefinity 表单控件。我想将验证添加到名字文本框。在模型中，我在视图使用的视图模型中的属性上具有 [Required] 属性。我只得到红色文本 The FirstName field is required. 但我希望文本框和标签也为红色。是否有另一个 class 我需要用于 TextBox 或任何带有 Bootstrap 的东西？

查看

@Html.Script(ScriptRef.JQueryValidate, "top", true)

@{
    HtmlHelper.ClientValidationEnabled = true;
    HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
}

查看

<div class="form-group row">
                        <div class="col-sm-6">
                            @Html.LabelFor(model => model.FirstName)
                            @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", @id = "txtFirstName" })
                            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                        </div>

                        <div class="col-md-6">
                            @Html.LabelFor(model => model.LastName)
                            @Html.TextBoxFor(x => x.LastName, new { @class = "form-control", @id = "txtLastName" })
                            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                        </div>
                    </div>

型号

[Required]
public string FirstName { get; set; }

Answer 1

你可以达到你想要的效果，你需要包装你的代码

@Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", @id = "txtFirstName" })
     @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })

在 div 中带有 class“存在错误”或任何您喜欢的名称

还需要补充一些小的Css，如下所述：

.error-exist label
{
color:red !important;
}

.error-exist input[type="text"]
{
border:1px solid red !important;
}

将此添加到您的 style.css

Answer 2

通常，要在页面上初始化 jquery 验证插件，您需要执行以下操作

<script>
$(function() {
  
   $("form").validate();

})
</script>

sitefinity 验证数据视图

sitefinity Validation data view

twitter-bootstrap

bootstrap-4

telerik

sitefinity