Question

我正在使用默认验证的MVC5应用程序。模型上的必需属性呈现为from中的单选按钮。到目前为止，验证工作正常。如果未选择单选按钮，则验证消息显示未正确选择值。这些选项是模型中List的一部分，在页面上渲染多达10组单选按钮。

我使用bootstrap的data-toggle =按钮更改了这些单选按钮。按钮显示正常。但是，如果我现在选择一个按钮，则基础单选按钮不会获得单击。好吧，我写了一些jquery来将点击传播到基础单选按钮。这就产生了问题。即使单选按钮现在被检查=“已检查”，mvc验证仍然会打印验证消息，表明尚未选择值。

视图中一个组的相应html如下：

<div class="UserRbAnswer btn-group margin" data-toggle="buttons">    
<label class="btn btn-default">
    <input class="myRadioButton valid" data-val="true" data-val-number="The field OptionChoiceId must be a number." data-val-required="Please select a status." id="QuestionResponseList_1__OptionChoiceId" name="QuestionResponseList[1].OptionChoiceId" type="radio" value="1">
    Acceptable
</label>
<label class="btn btn-default">
    <input class="myRadioButton valid" id="QuestionResponseList_1__OptionChoiceId" name="QuestionResponseList[1].OptionChoiceId" type="radio" value="2">
    Not Acceptable
</label>
<label class="btn btn-default active">
    <input class="myRadioButton valid" id="QuestionResponseList_1__OptionChoiceId" name="QuestionResponseList[1].OptionChoiceId" type="radio" value="3" checked="checked">
    Not Applicable
</label>
<div><span class="field-validation-valid" data-valmsg-for="QuestionResponseList[1].OptionChoiceId" data-valmsg-replace="true"></span></div>

您会注意到第三个选项已添加属性。我写的传播到单选按钮的jquery如下：

$(document).ready(function(){
    $('.UserRbAnswer .btn').click(function () {
        $(this).find('input:radio').attr('checked', 'checked');
    });
});

如何判断MVC验证是否识别出现在已选择单选按钮并且不应将此标记为错误？

目前我没有足够的声誉来发布单选按钮的图像，但如果我需要，我可以在某处托管它。

还有另一个怪癖。我在页面顶部有一个下拉列表，允许我为页面上的所有单选按钮选择一个值。如果我从此下拉列表中选择一个值，则MVC验证会识别出已选择了一个单选按钮。

这个下拉列表的HTML：

<select class="OptionSelect">
<option value="0">None</option>
<option value="1">Acceptable</option>
<option value="2">Not Acceptable</option>
<option value="3">Not Applicabale</option>
</select>

相应的jquery：

   $('.OptionSelect').change(function () {            
        var val = this.value;
        //mark all radio buttons as unchecked
        $('.UserRbAnswer :radio').attr('checked', false);
        //select the radio buttons that match
        $('.UserRbAnswer :radio[value=' + val + ']').attr('checked', 'checked')
        //add active class to the labels
        $('[id^="QuestionResponseList_"]').each(function () {
            $(this).parent('label').removeClass('active');
            if (this.checked) $(this).parent('label').addClass('active');
        });
    });

单选按钮具有以下css：

[data-toggle=buttons]>.btn>input[type=radio]    
{
   position: absolute;
   z-index: -1;
   filter: alpha(opacity=0);
   opacity: 0;
}

顶部的标签的z-index为+2，因此不会显示单选按钮。验证确实绑定到它，但是当我通过jquery添加选中对单选按钮并提交表单时，验证显示错误，即没有选择按钮。

请提供一些见解。

Answer 1

默认情况下，不会对隐藏元素执行不显眼的验证。如果您检查jquery.validate.js文件，则会看到默认设置包含ignore: ":hidden"。您可以使用

覆盖它

$.validator.setDefaults({ 
  ignore: [] // or ignore: "" depending on the jquery version
});

或（在document.ready中）

$('form').validate({
  ignore: []
});

您无需设置单选按钮状态的脚本，因为单击标签（样式为按钮）无论如何都会切换单选按钮的状态。 Refer fiddle

注意：有点不清楚为什么你有4个可能的值，但只提供3个选项，所以我不确定你试图用这个设计实现什么

单选按钮呈现为bootstrap data-toggle =按钮，MVC验证失败

1 个答案: