sitefinity 验证数据视图

问题描述

我正在构建这个 MVC 表单，而不是使用 sitefinity 表单控件。我想将验证添加到名字文本框。在模型中，我在视图使用的视图模型中的属性上具有 [required] 属性。我只得到红色文本 The FirstName field is required. 但我希望文本框和标签也为红色。是否还有另一个类需要用于 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,@id = "txtLastName" })
                            @Html.ValidationMessageFor(model => model.LastName,new { @class = "text-danger" })
                        </div>
                    </div>

型号

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

解决方法

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

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

})
</script>

,

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

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

在一个带有“error-exist”类或任何你喜欢的名字的 div 中

还需要添加一些小CSS，如下所示：

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

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

在你的 style.css 中添加这个