locked
jQuery validation with checkboxes problem with 2 sections RRS feed

  • Question

  • User629837836 posted

    jQuery validation with checkboxes problem.

    I have a form that has two headings:

    The issue: Under the "Heading 1", one option must be selected. Under "Heading 2" one option must be selected.

    <input type="checkbox" id="commjoin" name="commjoin"/> THROUGH <input type="checkbox" id="commjoin11" name="commjoin11"/>is under "Heading 1".
    Heading 1
    checkbox
    checkbox
    checkbox
    checkbox
    checkbox
    checkbox


    <input type="checkbox" id="commjoin12" name="commjoin12"/> THROUGH <input type="checkbox" id="commjoin50" name="commjoin50"/>is under "Heading 1".
    Heading 2
    checkbox
    checkbox
    checkbox
    checkbox
    checkbox
    checkbox

    This needs to be check when the "Next" button is clicked <input type="submit" name="button" onclick="return ckFormJ(5); " runat=server id="button" value="Next >>">

    To reiterate, under the "Heading 1", one option must be selected. Under "Heading 2" one option must be selected.

    I could see how to see if one box is checked maybe but to validate if at least one box is checked under each heading is a bit more difficult. How could I go about getting this to work?

    Thank You.

    Friday, March 25, 2016 6:29 PM

All replies

  • User709865310 posted

    Hi I think you should add a class name to all checkboxes of each heading. like

    Under heading1

    <input type='checkbox' class='heading1' />

    <input type='checkbox' class='heading1' />

    <input type='checkbox' class='heading1' />

    under heading 2

    <input type='checkbox' class='heading2' />

    <input type='checkbox' class='heading2' />

    <input type='checkbox' class='heading2' />

    and in your script

    function ckFormJ(){
     var heading1Checkbox=$(".heading1:checked");

     var heading2Checkbox=$(".heading2:checked");

    now you can get number of selected checkboxes like

    if (heading1Checkbox.lenght<=0){
      alert('Please select at least one heading checkbox.');
    }


    }

    Saturday, March 26, 2016 6:01 AM
  • User61956409 posted

    Hi mbelcher-mlbdev,

    Firstly, you could refer to the solution that provided. You could specify different CSS classes to different heading group, then you could find checked items from a group via CSS class.

    Secondly, you could try to use CheckBoxList, the following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    if ($(":checkbox[name*='heading1']:checked").length == 0) {
                        alert("Please select at least one heading1 checkbox");
                    }
    
                    if ($(":checkbox[name*='heading2']:checked").length == 0) {
                        alert("Please select at least one heading2 checkbox");
                    }
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="Button1" type="button" value="Next" />
                <br />
                Heading 1:
                <asp:CheckBoxList ID="chkheading1" runat="server">
                    <asp:ListItem>item1</asp:ListItem>
                    <asp:ListItem>item2</asp:ListItem>
                    <asp:ListItem>item3</asp:ListItem>
                </asp:CheckBoxList>
                Heading 2:
                <asp:CheckBoxList ID="chkheading2" runat="server">
                    <asp:ListItem>option1</asp:ListItem>
                    <asp:ListItem>option2</asp:ListItem>
                    <asp:ListItem>option3</asp:ListItem>
                </asp:CheckBoxList>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    Monday, March 28, 2016 9:48 AM
  • User629837836 posted

    I forgot to post a link to the actual checkboxes and what the HTML looks like; it might help :)

    http://files.mbdevpro.com/CheckboxesCODE.html

    Thursday, March 31, 2016 2:11 AM
  • User629837836 posted

    I got this code to work in a page by itself but for some reason it does not get what boxes are checked when in the asp page:

    This line doesn't get the box that is checked even hard coded when it is checked.
    if ($("commjoin2").attr('checked')) {
    alert("commjoin2 test is checked");
    SACounter++;
    }

    This all works fine in a static HTML page alone here: http://files.mbdevpro.com/CheckboxesCODETestjQUERY.html


    // : 4/1/2016
    $("input[type=submit]").click(function () {
    var SACounter = 0; //Scientific Assembly Counter
    var SAloop = 12; //Scientific Assembly loop counter
    var SAloopItem = ""; //Scientific Assembly loop item

    var SSCounter = 0; //State Societies
    var SSloop = 75; //State Societies
    var SSloopItem = ""; //State Societies

    var IsFormValid = false;


    // ********** Scientific Assembly **********
    for (SAflc = 2; SAflc < SAloop; SAflc++) {
    SAloopItem = "#commjoin" + SAflc;
    alert("looping with - " + SAloopItem + "<br>");

    if ($(SAloopItem).attr('checked')) {
    alert(SAloopItem + " is checked");
    SACounter++;
    }

    }
    // ************************************


    if ($("commjoin2").attr('checked')) {
    alert("commjoin2 test is checked");
    SACounter++;
    }


    // ********** State Societies **********
    for (SSflc = 12; SSflc < SSloop; SSflc++) {
    SSloopItem = "#commjoin" + SSflc;
    //alert("looping with - " + SSloopItem + "<br>");

    if ($(SSloopItem).attr('checked')) {
    //alert(SSloopItem + " is checked");
    SSCounter++;
    }

    }
    // ************************************

    alert("Scientific Assembly Counter = " + SACounter);
    alert("State Societies = " + SSCounter);

    if (SACounter < 1) {
    alert("Please select at least one Scientific Assembly = " + SACounter);
    return false;
    }

    if (SSCounter < 1) {
    alert("Please select at least one State Society = " + SSCounter);
    return false;
    }

    });

    Friday, April 1, 2016 8:31 PM
  • User61956409 posted

    Hi mbelcher-mlbdev,

    $("commjoin2").attr('checked')

    I’d like to know what is “commjoin2”. Is it the id or class of elements? Or is it the value of an attribute? You could refer to the following link to use an appropriate jQuery selector to find the element.

    https://api.jquery.com/category/selectors/

    Best Regards,

    Fei Han

    Tuesday, April 5, 2016 8:34 AM
  • User-366017857 posted

    Hi,

    First you add all the checkboxes under div lets say

    <div id="heading1">

    here put all your checkboxes which are required in heading one

    </div>

    <div id="heading2">

    here put all your checkboxes which are required in heading two

    </div>

    now use below code to check whether at least one checkbox is selected or not in each heading

    <script>
            $(function () {
                $("#yourButtonId").click(function () {
    
    		var length1=$('#heading1 input[type=checkbox]:checked').length;
    
    		var length2=$('#heading2 input[type=checkbox]:checked').length;
    
                    if (length1 == 0) {
                        alert("Please select at least one heading1 checkbox");
    			return false;
                    }
    
                    if (length2 == 0) {
                        alert("Please select at least one heading2 checkbox");
    			return false;
                    }
    		return true;
                })
            })
        </script>



    Wednesday, April 6, 2016 8:08 AM
  • User629837836 posted

    Hi,
    I wrapped each group in a div tag so that I can then check each group for at least one box checked but for some reason I can't get it working.

    HTML:

    <div id="Scientific Assembly">

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Chemistry/Urinalysis
    <input type="hidden" id="commid2" name="commid2" value="2"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin2" name="commjoin2"/>
    </td>
    </tr>

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Education
    <input type="hidden" id="commid3" name="commid3" value="3"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin3" name="commjoin3"/>
    </td>
    </tr>

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Generalist
    <input type="hidden" id="commid4" name="commid4" value="4"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin4" name="commjoin4"/>
    </td>
    </tr>

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Hematology/Hemostasis
    <input type="hidden" id="commid5" name="commid5" value="5"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin5" name="commjoin5"/>
    </td>
    </tr>
    </div>

    <div id="State Societies">

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Alabama State Society
    <input type="hidden" id="commid12" name="commid12" value="12"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $10.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin12" name="commjoin12"/>
    </td>
    </tr>

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Alaska State Society
    <input type="hidden" id="commid13" name="commid13" value="13"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin13" name="commjoin13"/>
    </td>
    </tr>

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Arizona/Nevada State Society
    <input type="hidden" id="commid14" name="commid14" value="14"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin14" name="commjoin14"/>
    </td>
    </tr>

    <tr>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; width:60%;">
    Arkansas State Society
    <input type="hidden" id="commid15" name="commid15" value="15"/>
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; text-align:center;">
    $0.00
    </td>
    <td class="form_data_medium" style="padding: 5px; border-bottom: 1px solid #e4e1e1; border-left: 1px solid #e4e1e1; border-right: 1px solid #e4e1e1; text-align:center;">
    <input type="checkbox" id="commjoin15" name="commjoin15"/>
    </td>
    </tr>
    </div>

    JQUERY:
    $("input[type=submit]").click(function () {

    var length1 = $('#Scientific Assembly input[type=checkbox]:checked').length;
    alert("length1=" + length1);

    var length2 = $('#State Societies input[type=checkbox]:checked').length;
    alert("length2=" + length2);

    if (length1 == 0) {
    alert("Please select at least one Scientific Assembly checkbox");
    return false;
    }

    if (length2 == 0) {
    alert("Please select at least one State Societies checkbox");
    return false;
    }
    return true;
    });

    Tuesday, April 12, 2016 2:15 PM