I have 4 groups of checkboxes and corresponding dropdowns on a form. Is there

Question

0

Asked: May 31, 20262026-05-31T00:35:09+00:00 2026-05-31T00:35:09+00:00

I have 4 groups of checkboxes and corresponding dropdowns on a form. Is there

0

I have 4 groups of checkboxes and corresponding dropdowns on a form. Is there a way to validate them so that if the user checks the checkbox, they have to make a selection in both corresponding dropdowns?

The checkboxes (named product1, product2, product3, product4) are already validated so that at least one of them has to be checked. The corresponding dropdowns are named qty1, Body1, qty2, Body2, qty3, Body3, qty4, and Body4.

Can anyone point me in the right direction?

This is the code:

<?php include ('head.php'); ?>
<body>
<div id="container" class="container_12">
<?php include ('header.php'); ?>
<div id="content" class="prefix_1">
<h3>Order Angles</h3>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!-- jquery validation rules -->
<script id="validator" type="text/javascript">
$(document).ready(function() {

$.validator.addMethod('product', function (value) {
return $('.product:checked').size() > 0; }, 'Please select at least one product');


var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e,i) { return $(e).attr("name")}).join(" ");


var validator = $("#order-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: { required: true, email: true },

company: "required",
address: "required",
city: "required",
state: "required",
zip : { required: true, minlength: 5, maxlength: 5, digits: true, },
phone: { required: true, digits: true, minlength: 10, },

dealer: "required",

product: { required: true, minlength: 1, },

purchase: "required",

groups: { checks: checkbox_names },
errorPlacement: function(error, element) {
if (element.attr("type") == "checkbox")
error.insertAfter(checkboxes.last());
else
error.insertAfter(element);
}         

},
messages: {
firstname: "Please enter your First Name",
lastname: "Please enter your Last Name",
email: { required: "Please enter a valid email address",    minlength: "Please enter a valid email address" },

company: "Please enter your Office Name",
address: "Please enter your Address",
city: "Please enter your City",
state: "Please enter your State",
zip: "Please enter your Zip Code (5 digits only)",
phone: { required: "Please enter your Phone Number", digits: "Please enter numbers only (no dashes or other characters)", minlength: "Please enter all 10 digits"},

dealer: "Please enter your Dealer",

product: "Please select at least one item to order",

purchase: "You must check this to proceed",
},

// set this class to error-labels to indicate valid fields
success: function(label) {
// set &nbsp; as text for IE
label.html("&nbsp;").addClass("checked");
}
});




// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});

});
</script>


<form action="order-request-engine.php" method="post" name="order-form" id="order-form" class="grid_10">

<fieldset class="contactinfo">
<legend>Contact Information</legend>
<div>
<label for="firstname">First Name* :</label>
<input type="text" id="firstname" name="firstname" />
</div>
<div>
<label for="lastname">Last Name* :</label>
<input type="text" id="lastname" name="lastname" />
</div>
<div class="clear"></div>
<div>
<label for="email">Email* :</label>
<input type="text" id="email" name="email" />
</div>

</fieldset>

<fieldset class="shippinginfo">
<legend>Shipping Information</legend>
<div class="full">
<label for="company">Office Name* :</label>
<input type="text" id="company" name="company" />
</div>
<div class="full">
<label for="address">Address* :</label>
<input type="text" id="address" name="address" />
</div>
<div class="full">
<label for="city">City* :</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State* :</label>
<input name="state" type="text" id="state" size="2" maxlength="2" />
</div>
<div>
<label for="zip">Zip* :</label>
<input type="text" id="zip" name="zip" maxlength="5" size="5" />
</div>
<div class="clear"></div>
<div>
<label for="phone">Phone* :</label>
<input type="text" id="phone" name="phone" />
</div>
</fieldset>

<fieldset class="dealerinfo">
<legend>Dealer Information</legend>
<div class="full">
<label for="dealer">Dealer*:</label>
<input type="text" id="dealer" name="dealer" />
</div>

<div class="full">
<label for="repname">Representative Name:</label>
<input type="text" id="repname" name="repname" />
</div>

</fieldset>


<fieldset class="selection">
<legend>Disposable Angle</legend>
<div>
<input type="checkbox" value=" Original - 200ct - <span class='purple'> </span>" name="product1" class="product">
<label>
Elite Original - 200ct - <span class='purple'> </span>
<span class="mini">Classic</span>
</label>
</div>

<div class="qtybox">
<label for="qty">Qty:</label>
<select name="qty1" class="required_group">
<option selected="selected" value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<br />
<label for="Body">Body:</label>
<select name="Body1" class="required_group">
<option selected="selected" value=""></option>
<option value="Classic">Classic</option>
<option value="Contra">Contra</option>
</select>
</div>
<div>
<input type="checkbox" value="Elite" name="product2" class="product">
<label>
Elite  - 200ct - <span class='purple'>25% softer than Elite Original </span>
<span class="mini">Classic</span>
</label>
</div>

<div class="qtybox">
<label for="qty">Qty:</label>
<select name="qty2">
<option selected="selected" value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<br />
<label for="Body">Body:</label>
<select name="Body2">
<option selected="selected" value=""></option>
<option value="Classic">Classic</option>
<option value="Contra">Contra</option>
</select>
</div>
<div>
<input type="checkbox" value="Elite" name="product3" class="product">
<label>
Elite - 200ct - <span class='purple'>longer cup </span>
<span class="mini">Classic</span>
</label>
</div>

<div class="qtybox">
<label for="qty">Qty:</label>
<select name="qty3">
<option selected="selected" value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<br />
<label for="Body">Body:</label>
<select name="Body3">
<option selected="selected" value=""></option>
<option value="Classic">Classic</option>
<option value="Contra">Contra</option>
</select>
</div>
<div>
<input type="checkbox" value="Polisher <span class='purple'> </span>" name="product4" class="product">
<label>
Polisher - 100ct - <span class='purple'> </span>
<span class="mini">#</span>
</label>
</div>

<div class="qtybox">
<label for="qty">Qty:</label>
<select name="qty4">
<option selected="selected" value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<br />
<label for="Body">Body:</label>
<select name="Body4">
<option selected="selected" value=""></option>
<option value="Classic">Classic</option>
</select>
</div>
<input type="hidden" value="" name="5">


</fieldset>


<fieldset class="promocodeinfo">
<legend>Promo Code:</legend>
<label for="promocode">Promo Code (if applicable):</label>
<input type="text" id="promocode" name="promocode" />
</fieldset>


<fieldset class="disclaimerinfo">
<legend>Disclaimer:</legend>

<div>
<input type="checkbox" value="checked" name="purchase" id="purchase" />
<label for="purchase" class="purchase">
<strong>I am aware that my supplier will bill my account for this purchase.</strong>
</label>
</div>
</fieldset>

<input type="submit" value="Submit" name="action" class="button btn-submit" />
</form>

</div>

<?php include ('footer.php'); ?>

</div>

<?php include ('copyright.php'); ?>

</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-31T00:35:10+00:00

Editorial Team

2026-05-31T00:35:10+00:00Added an answer on May 31, 2026 at 12:35 am

What you need to do is add a rule making each select required, but rather than just saying required: true, set it to a selector, like this:

var validator = $("form").validate({
    rules: {
        //the rest of your rules
        Body4: {
            required:'input[name="qty4"]:checked'
        }
    }         
});

See it working here: http://jsfiddle.net/ryleyb/k6dXS/

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have 4 groups of checkboxes and corresponding dropdowns on a form. Is there

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply