我有一个表单,可以从数据库中创建一组单选按钮和一组复选框。它们固定在六个无线电和六个复选框上。它们用于调查问卷,当用户单击下一个按钮时,将打开表单的新版本。在某些情况下,将有四个单选按钮,有时三个。这同样适用于复选框,有时是六个或有时四个。
我真的很难在发布时对表单进行JQuery验证。我可以让单选按钮工作,但我不能成功地复选框。
Razor View如下:
@if (Model.fldAnswerType == "Radio") { @Html.Label("", String.Format(Model.fldQuestion, 1))
<br /> if (Model.fldOption1 != null) {
<label class="containers">
@Model.fldOption1
<input type="radio" name="Radio" id="Radio" value="@Model.fldOption1">
<span class="radios"></span>
</label>
} if (Model.fldOption2 != null) {
<label class="containers">
@Model.fldOption2
<input type="radio" name="Radio" id="Radio" value="@Model.fldOption2">
<span class="radios"></span>
</label>
} if (Model.fldOption3 != null) {
<label class="containers">
@Model.fldOption3
<input type="radio" name="Radio" id="Radio" value="@Model.fldOption3">
<span class="radios"></span>
</label>
} if (Model.fldOption4 != null) {
<label class="containers">
@Model.fldOption4
<input type="radio" name="Radio" id="Radio" value="@Model.fldOption4">
<span class="radios"></span>
</label>
} if (Model.fldOption5 != null) {
<label class="containers">
@Model.fldOption5
<input type="radio" name="Radio" id="Radio" value="@Model.fldOption5">
<span class="radios"></span>
</label>
} if (Model.fldOption6 != null) {
<label class="containers">
@Model.fldOption6
<input type="radio" name="Radio" id="Radio" value="@Model.fldOption6">
<span class="radios"></span>
</label>
} }
<fieldset class="chkGroup">
@if (Model.fldAnswerType == "Check") { @Html.Label("", String.Format(Model.fldQuestion, 1))
<br /> if (Model.fldOption1 != null) {
<label class="containers">
@Model.fldOption1
<input type="checkbox" value="@Model.fldOption1" name="chkGroup[]" id="Check1" class="Check">
<span class="checkmark"></span>
</label>
} if (Model.fldOption2 != null) {
<label class="containers">
@Model.fldOption2
<input type="checkbox" value="@Model.fldOption2" name="chkGroup[]" id="Check2" class="Check">
<span class="checkmark"></span>
</label>
} if (Model.fldOption3 != null) {
<label class="containers">
@Model.fldOption3
<input type="checkbox" value="@Model.fldOption3" name="chkGroup[]" id="Check3" class="Check">
<span class="checkmark"></span>
</label>
} if (Model.fldOption4 != null) {
<label class="containers">
@Model.fldOption4
<input type="checkbox" value="@Model.fldOption4" name="chkGroup[]" id="Check4" class="Check">
<span class="checkmark"></span>
</label>
} if (Model.fldOption5 != null) {
<div id="Checks"></div>
<label class="containers">
@Model.fldOption5
<input type="checkbox" value="@Model.fldOption5" name="chkGroup[]" id="Check5" class="Check">
<span class="checkmark"></span>
</label>
} if (Model.fldOption6 != null) {
<label class="containers">
@Model.fldOption6
<input type="checkbox" value="@Model.fldOption6" name="chkGroup[]" id="Check6" class="Check">
<span class="checkmark"></span>
</label>
}
}
</fieldset>
<p class="control-error" name="control-error" id="control-error">You must select an answer.</p>
<p class="checkerror" name="checkerror" id="checkerror">You must select an answer chk.</p>
<input type="submit " value="Next " id="btn " class="btn btn-sm btn-primary " />
我的JQuery用于不同的元素同时工作,而不是单独取决于表单上元素的类型。
$(document).ready(function () {
$('#myForm').submit(function () {
if ($('#Radio').length) {
console.log("Radio")
if (!$("input[name='Radio']:checked").val()) {
$('#control-error').show();
return false;
} else {
$('#control-error').hide();
}
} else {
$('#control-error').hide();
}
//If chk exists do the following
if (!$("input[name='chkGroup[]']:checked").val()) {
$('.chkGroup').each(function () {
console.log("Check")
if ($(this).find('input[type=checkbox]:checked').length == 0) {
$('#checkerror').show();
return false;
}
else {
$('#checkerror').show();
}
});
} else {
$('#control-error').hide();
}
});
});
答案 0 :(得分:0)
您的电台盒都有相同的ID - 这可能会导致错误,因为它不知道要验证哪一个。
更改单选框以使其具有类,然后应该能够使用与复选框相同的JS。
编辑:
$('#btn').click(function () {
$('#body').hide();
if ($('.Radio').length) {
if (!$("input.Radio[name='Radio']:checked").val()) {
console.log("Radio")
$('#radioerror').show();
return false;
} else {
$('#radioerror').hide();
}
} else {
$('#radioerror').hide();
}
});
$('#btnCheck').click(function () {
if ($('.Check').length) {
if ($('input.Check[type=checkbox]:checked').length < 1) {
$('#chkerror').show();
return false;
}
else {
$('#chkerror').hide();
}
} else {
$('#chkerror').hide();
}
});