我正在使用Asp.Net Mvc开发调查应用程序。我在项目的结尾，但是我有一个问题。拥有调查链接的客户进入该链接并查看采访。问卷中的问题及其选项是动态创建的。某些问题的另一个选项功能可以为每个问题填写一个文本字段。将对问卷进行投票的客户必须使用单选按钮对所有问题进行投票。正如我所说，在某些问题中，“其他”选项可激活文本字段并在此处输入文本。提交投票的客户将提交调查。提交时，必须回答所有问题。如何使用javascript做到这一点。我必须定义一个规则吗？我不太熟悉Javascript。我正在抛出一些示例代码，以等待您的帮助。
Form
@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) //Coming token from url
<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">
<input type="radio" class="custom-control-input" id="@("option_" + option.QuestionId + "_" + option.OptionId)" name="[email protected]">
<label class="custom-control-label font-weight-lighter" for="@("option_" + option.QuestionId + "_" + option.OptionId)">@option.OptionName</label>
</div>
}
@if (surveyQuestion.Questions.IsOtherOptionRequired)
{
<div class="form-group" id="optionOtherParent">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="@("optionOther_" + surveyQuestion.QuestionId)" name="[email protected]">
<label class="custom-control-label font-weight-lighter" for="@("optionOther_" + surveyQuestion.QuestionId)">Other</label>
</div>
<textarea class="form-control" rows="3" id="@("optionOtherText_" + surveyQuestion.QuestionId)" name="[email protected]" disabled="disabled"></textarea>
</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 type="radio" class="custom-control-input" id="option_4_2017" name="optionRadioButton-4">
<label class="custom-control-label font-weight-lighter" for="option_4_2017">Model 1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option_4_2018" name="optionRadioButton-4">
<label class="custom-control-label font-weight-lighter" for="option_4_2018">Model 2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option_4_2019" name="optionRadioButton-4">
<label class="custom-control-label font-weight-lighter" for="option_4_2019">Model 3</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option_4_2020" name="optionRadioButton-4">
<label class="custom-control-label font-weight-lighter" for="option_4_2020">Model 4</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option_4_2021" name="optionRadioButton-4">
<label class="custom-control-label font-weight-lighter" for="option_4_2021">Model 5</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option_4_2022" name="optionRadioButton-4">
<label class="custom-control-label font-weight-lighter" for="option_4_2022">Model 6</label>
</div>
</div>
</div>
您可以尝试将规则手动添加到按钮。
$yourButtonSelector.rules('add', 'required');
$yourFormSelector.validate();
if (!$yourFormSelector.valid()) {
return;
}
不要忘记导入jQuery验证脚本：
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>