lundi 26 mars 2018

JQuery validation of radio buttons and check boxes on same form

I have a form that creates a set of radio buttons and a set of checkboxes from the database. These are fixed at six radio and six checkboxes. They are for a questionnaire and a new version of the form opens when the user clicks the next button. In some cases, there will be four radio buttons and sometimes three. The same applies to the checkboxes, sometimes six or sometimes four.

I am really struggling to do JQuery validation on the form as it posts. I can get the radio buttons to works, but I cannot do the checkboxes successfully.

The Razor View is as follows:

 @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 " />

My JQuery for the different elements is working at the same time and not individually depending on the type of element on the form.

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




Aucun commentaire:

Enregistrer un commentaire