同一表单上单选按钮和复选框的 JQuery 验证

Question

我有一个从数据库创建一组单选按钮和一组复选框的表单。这些固定在六个单选框和六个复选框上。它们用于调查问卷，当用户单击下一步按钮时会打开新版本的表单。在某些情况下，会有四个单选按钮，有时是三个。这同样适用于复选框，有时六个或四个。

我真的很难在表单发布时对其进行 JQuery 验证。我可以让单选按钮工作，但我不能成功地做复选框。

剃刀视图如下：

 @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();
            }
        });
    });

Answer 1

您的单选框都有相同的 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();
            } 
        });