不显眼的验证不会在单选按钮上触发答案

【问题标题】：Unobtrusive validation doesn't fire on radio buttons不显眼的验证不会在单选按钮上触发
【发布时间】：2019-10-09 07:33:16
【问题描述】：

我正在尝试使用包含的 jQuery.Validate 在 JavaScript 中验证表单。文本和选择输入在 JavaScript 中正确验证，但我在表单中包含的任何单选按钮组仅在服务器上验证。如何让客户端验证正常工作？我的观点如下：

@Html.AccessibleValidationMessageFor(m => m.DeliveryMethod)
@foreach (var deliveryMethod in Model.GetDeliveryMethodsOrdered())
{
    @Html.AccessibleRadioButtonFor(m => m.DeliveryMethod, deliveryMethod.Id, new { id = string.Format("DeliveryMethod_{0}", deliveryMethod.Id) })
    <label for="DeliveryMethod_@deliveryMethod.Id">@deliveryMethod.Description</label>
}

我正在使用内置 HTML 助手的一些扩展，但我认为这不会导致问题，因为我也尝试过内置 @Html.RadioButtonFor 和 @Html.ValidationMessageFor 助手。以防万一，这里是自定义帮助代码。

    public static IHtmlString AccessibleRadioButtonFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, object values, object htmlAttributes = null)
    {
        ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);



        var fieldName = ExpressionHelper.GetExpressionText(expression);
        var fullBindingName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);
        var validationAttributes = html.GetUnobtrusiveValidationAttributes(fullBindingName, metadata);
        if (!html.ViewData.ModelState.IsValidField(fullBindingName))
        {
            if (!validationAttributes.ContainsKey("aria-describedby"))
            {
                validationAttributes.Add("aria-describedby", fullBindingName.ToLower() + "-valMsg");
                validationAttributes.Add("aria-invalid", "true");
            }
        }

        RouteValueDictionary routeValues = new RouteValueDictionary(htmlAttributes);
        if (routeValues != null)
        {
            foreach (var attribute in validationAttributes)
            {
                routeValues.Add(attribute.Key, attribute.Value);
            }
            return html.RadioButtonFor(expression, values, routeValues);
        }
        return html.RadioButtonFor(expression, values, validationAttributes);
    }

在模型中，我将类型设为可空并添加了必需的属性。

    [Required]
    [Display(Name = "Delivery Method")]
    public int? DeliveryMethod { get; set; }

通过此设置，单选按钮呈现为：

<input aria-describedby="deliverymethod-valMsg" aria-invalid="true" 
    class="input-validation-error" data-val="true" data-val-number="The field Delivery Method must be a number." 
    data-val-required="The Delivery Method field is required." id="DeliveryMethod_-1" 
    name="DeliveryMethod" type="radio" value="-1">

我尝试了几个想法：

将模型类型变为常规的int 或string
创建自定义验证属性并将其应用于模型属性。
正如我上面所说，用内置版本替换自定义助手，试图找出原因。

所有这些都给我留下了相同的结果，单选按钮将在服务器端正确验证，但永远不会在客户端。目前我正在尝试在jquery.validate.js 文件中进行调试，看起来所需的验证器函数从未在任何单选按钮控件上实际调用过，如果这有助于缩小范围。如果有人知道如何进行验证，我将不胜感激。谢谢！

【问题讨论】：

标签： c# jquery asp.net-mvc unobtrusive-validation

【解决方案1】：

我的一位同事经过大量挖掘后发现了这一点。事实证明，jQuery 验证不会验证任何隐藏的输入。导致它认为输入被隐藏的条件之一是将高度和宽度都设置为零像素。我们对单选按钮和复选框应用了一些自定义样式，因此它们被设置为高度和宽度为零，因此它们被视为隐藏而不是验证。

修复结果是使它们每个只有 1 个像素、高度和宽度。

【讨论】：