sitefinity Validation data view

问题

I am building this MVC form not using the sitefinity form control. I wanted to add validate to the First Name TextBox. In the model I have [Required] attribute on the property in the view model used by the view. I only get the red text The FirstName field is required. but I wanted the textbox and label to be red as well. Is there another class I need to use for the TextBox or anything with Bootstrap ?

View

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

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

View

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

Model

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

回答1:

Normally, to initialize the jquery validate plugin on the page, you will need to do something like this

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

})
</script>

回答2:

You can achieve the desired result, you need to wrap your code

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

in a div with a class "error-exist" or what ever name you like

also there is a need to add some minor Css mentioned as below:

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

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

add this in your style.css

来源：https://stackoverflow.com/questions/65672858/sitefinity-validation-data-view

标签

twitter-bootstrap

bootstrap-4

telerik

sitefinity