如何使用 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 驗證腳本！