jQueryの検証 - チェックボックスとプロダクト注文フォームの対応するドロップダウン

フォームに4つのグループのチェックボックスと対応するドロップダウンがあります。ユーザーがチェックボックスをチェックすると、両方の対応するドロップダウンで選択する必要があるように、それらを検証する方法はありますか？jQueryの検証 - チェックボックスとプロダクト注文フォームの対応するドロップダウン

（product1、product2、product3、product4という名前の）チェックボックスは、少なくとも1つがチェックされるように既に検証されています。対応するドロップダウンは、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>

出典

2012-02-21 miles

は、それぞれが必要な選択させるルールを追加しているのではなく、ちょうどこのように、セレクタに設定し、required: true言っより：

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

それはここで働いてください：http://jsfiddle.net/ryleyb/k6dXS/

出典

2012-02-21 16:48:03 Ryley

他のSOの答えもこのように見てください：http://stackoverflow.com/questions/1316602/advanced-jquery-validation-avoiding-validations-on-certain-conditions – Ryley

私は（exampleを参照）<input type="text" name="username" class="required" />のように、あなたがしたいの検証の種類を表すためのクラスを使用してお勧めします。
そのようにして、チェックボックスのchangeイベントを使用して、ドロップダウンリストからrequiredクラスを追加または削除できます。あなたがする必要がどのような

出典

2012-02-21 16:21:13

ありがとうございました！私はそれを考えなかった。私はあなたがここで説明した方法を見つけました：http://stackoverflow.com/questions/6899859/jquery-if-checkbox-is-checked-add-a-class私はそれを試してみましょう – miles

-1

uは、このように、シンプルなjQueryの検証が必要な場合は

だけ..このよう

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

を "必要" の単純な属性を追加します。しかし：

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

出典

2017-11-10 01:44:38

jQueryの検証 - チェックボックスとプロダクト注文フォームの対応するドロップダウン

答えて

関連する問題