Question

我在表单上有4组复选框和相应的下拉列表。有没有办法验证它们，以便如果用户选中复选框，他们必须在相应的下拉列表中进行选择？

已经验证了复选框（名为product1，product2，product3，product4），因此必须至少检查其中一个复选框。相应的下拉列表名为qty1，Body1，qty2，Body2，qty3，Body3，qty4和Body4。

有人能指出我正确的方向吗？

这是代码：

<?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>

Answer 1

我建议使用类来表示您想要的验证类型，如<input type="text" name="username" class="required" />所示（请参阅example）。
这样，您可以使用复选框的change事件在下拉列表中添加或删除required类。

Answer 2

您需要做的是添加一条规则，让每个选择都需要，但不要只是说required: true，而是将其设置为选择器，如下所示：

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

在此处查看：http://jsfiddle.net/ryleyb/k6dXS/

Answer 3

只需像这样添加简单属性“required”..

<input type="checkbox" required="required" />

但是，如果你需要简单的Jquery验证，就像这样：

<script>
$(document).ready(function(){
$("#Save").click(function(){
            var Value = $("#OnSelect").val();
            if(Value==='')
            {
                alert("Choose one");
            }else{
                alert(Value);
            }

        });
});
</script>
<form>
<select name="SelectOption" id="OnSelect">
<option value="">--Empty--</option>
<option value="Here">1</option>
</select>
<button id="Save">Save</button>
</form>

jQuery验证 - 产品订单表单的复选框和相应的下拉列表

3 个答案: