如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组？

Question

我正在使用 Asp.Net Mvc 开发一个调查应用程序。我在项目的最后，但我有一个问题。拥有调查链接的客户进入链接并查看采访。问卷中的问题及其选项是动态创建的。某些问题的另一个选项功能可以为每个问题填写一个文本字段。将为问卷投票的客户必须使用单选按钮对所有问题进行投票。正如我所说，在某些问题中，“其他”选项会激活文本字段并在此处输入文本。提交投票的客户提交调查。提交时，必须回答所有问题。我怎样才能做到这一点使用 javascript 不显眼。我必须定义一个规则吗？我不熟悉 Javascript 不显眼。我正在通过抛出示例代码来等待您的帮助。

表格

 @using (Html.BeginForm("SubmitSurvey", "Survey", FormMethod.Post, new { onsubmit = "return SubmitForm(this)" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Token)           
        <div class="card">
            <div class="card-header bg-gradient-blue "><span class="badge badge-warning"><i class="fa fa-server"></i></span><b> @Model.SurveyName</b></div>
            <div class="card-body" style="overflow-y: auto; max-height: 100%" id="questionList">
                @{ int i = 0; }
                @foreach (SurveyQuestions surveyQuestion in Model.SurveyQuestions)
                {
                    <div class="card" style="margin-bottom: 5px">
                        <div class="card-header bg-gradient-blue"><span class="badge badge-warning">Question @(++i).</span> @surveyQuestion.Questions.QuestionName</div>
                        <div class="card-body" id="questionPortlet">
                            @foreach (Options option in surveyQuestion.Questions.Options)
                            {
                                <div class="custom-control custom-radio">
                                    @Html.RadioButton("optionRadioButton-" + option.QuestionId, "option_" + option.QuestionId + "_" + option.OptionId, new { id = "option_" + option.QuestionId + "_" + option.OptionId, @class = "custom-control-input" })
                                    @Html.Label("option_" + option.QuestionId + "_" + option.OptionId, option.OptionName, new { @class = "custom-control-label font-weight-lighter" })
                                </div>
                            }
                            @if (surveyQuestion.Questions.IsOtherOptionRequired)
                            {
                                <div class="form-group" id="optionOtherParent">
                                    <div class="custom-control custom-radio">
                                        @Html.RadioButton("optionRadioButton-" + surveyQuestion.QuestionId, "optionOther_" + surveyQuestion.QuestionId, new { id = "optionOther_" + surveyQuestion.QuestionId, @class = "custom-control-input" })
                                        @Html.Label("optionOther_" + surveyQuestion.QuestionId, "Other", new { @class = "custom-control-label font-weight-lighter" })
                                    </div>
                                    @Html.TextArea("optionOtherText-" + @surveyQuestion.Questions.QuestionId, "", new { @class = "form-control", rows = "3", id = "optionOtherText_" + surveyQuestion.QuestionId, disabled = "disabled" })
                                </div>
                            }

                        </div>
                    </div>
                }
            </div>

            <div class="card-footer bg-primary d-flex justify-content-end">
                <button type="submit" class="btn btn-warning" style="margin-bottom: 3px; margin-left: 5px; color: black"><i class="fa fa-save"></i>Send Survey</button>
            </div>
        </div>
                    }

上面生成的html代码

  <div class="card" style="margin-bottom: 5px">
                        <div class="card-header bg-gradient-blue"><span class="badge badge-warning">Question 2.</span> Merinosun hangi modellerini begeniyorsunuz?</div>
                        <div class="card-body" id="questionPortlet">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input" id="option_4_2017" name="optionRadioButton-4" type="radio" value="option_4_2017" />
                                    <label class="custom-control-label font-weight-lighter" for="option_4_2017">Model 1</label>


                                </div>
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input" id="option_4_2018" name="optionRadioButton-4" type="radio" value="option_4_2018" />
                                    <label class="custom-control-label font-weight-lighter" for="option_4_2018">Model 2</label>


                                </div>
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input" id="option_4_2019" name="optionRadioButton-4" type="radio" value="option_4_2019" />
                                    <label class="custom-control-label font-weight-lighter" for="option_4_2019">Model 3</label>


                                </div>
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input" id="option_4_2020" name="optionRadioButton-4" type="radio" value="option_4_2020" />
                                    <label class="custom-control-label font-weight-lighter" for="option_4_2020">Model 4</label>


                                </div>
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input" id="option_4_2021" name="optionRadioButton-4" type="radio" value="option_4_2021" />
                                    <label class="custom-control-label font-weight-lighter" for="option_4_2021">Model 5</label>


                                </div>
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input" id="option_4_2022" name="optionRadioButton-4" type="radio" value="option_4_2022" />
                                    <label class="custom-control-label font-weight-lighter" for="option_4_2022">Model 6</label>


                                </div>

                        </div>
                    </div>

已编辑

如何将关注转换为不显眼的验证

$(document).ready(function(){
$('#radioValidate').click(function(){
    var check = true;
    $("input:radio").each(function(){
        var name = $(this).attr("name");
        if($("input:radio[name="+name+"]:checked").length == 0){
            check = false;
        }
    });

    if(check){
        alert('One radio in each group is checked.');
    }else{
        alert('Please select one option in each question.');
    }
});
});

enter code here

Answer 1

您可以尝试手动向按钮添加规则。

   $yourButtonSelector.rules('add', 'required');
   $yourFormSelector.validate();

   if (!$yourFormSelector.valid()) {
         return;
   }

别忘了导入 jQuery 验证脚本！