asp:RequiredFieldValidator配合telerik RadDatePicker验证样式不显示问题

问题根因 #

该问题是ASP.NET原生RequiredFieldValidator和Telerik RadDatePicker这类复合控件的客户端校验逻辑不兼容导致的，主要有两个常见诱因：

1. RadDatePicker是多层嵌套的复合控件，原生校验器无法正确识别它的空值状态，只能识别基础单层输入控件的取值变化
2. Telerik Lightweight渲染模式下生成的DOM结构自带默认样式，会覆盖部分自定义校验样式的优先级

解决方案 #

• 方案1：替换为Telerik自带的RadRequiredFieldValidator（兼容性最好，推荐）
  这是最稳妥的解决方式，Telerik自带的校验控件对自家组件做了原生适配，无需额外配置即可正常生效，示例代码如下：

<telerik:RadDatePicker RenderMode="Lightweight" EnableTyping="false" ID="RDPAddPremisesAndFixedListDate" runat="server">
    <DateInput
        DateFormat="dd MMM yyyy"
        DisplayDateFormat="dd MMM yyyy"
        CssClass="general-profile-Date">
    </DateInput>
</telerik:RadDatePicker>
<telerik:RadRequiredFieldValidator runat="server" ID="rfvPremisesAndFixedListDate" 
    ControlToValidate="RDPAddPremisesAndFixedListDate"
    ErrorMessage="This Field is Empty" ValidationGroup="AddPremises" CssClass="error-msg" />

• 方案2：继续使用原生RequiredFieldValidator，修改绑定对象
  给RadDatePicker内部的DateInput设置独立ID，将校验器的ControlToValidate绑定到内部DateInput的ID即可，示例代码如下：

<telerik:RadDatePicker RenderMode="Lightweight" EnableTyping="false" ID="RDPAddPremisesAndFixedListDate" runat="server">
    <DateInput ID="RDPAddDateInput"
        DateFormat="dd MMM yyyy"
        DisplayDateFormat="dd MMM yyyy"
        CssClass="general-profile-Date">
    </DateInput>
</telerik:RadDatePicker>
<asp:RequiredFieldValidator runat="server" ID="rfvPremisesAndFixedListDate" 
    ControlToValidate="RDPAddDateInput"
    ErrorMessage="This Field is Empty" ValidationGroup="AddPremises" CssClass="error-msg" />

• 方案3：样式覆盖排查
  如果修改校验器后样式仍不生效，可打开浏览器开发者工具检查.error-msg的样式是否被Telerik默认样式覆盖，可通过提升选择器优先级或者添加!important声明解决，示例样式：

/* 提升选择器优先级避免被覆盖 */
form .error-msg {
    color: #f00 !important;
    display: inline-block !important;
    margin-left: 8px;
}

内容的提问来源于stack exchange，提问作者zazaza