Проверка JQuery - флажок и соответствующие раскрывающиеся списки для формы заказа продукта - PullRequest
Новая
       2

Проверка JQuery - флажок и соответствующие раскрывающиеся списки для формы заказа продукта

0 голосов
/ 21 февраля 2012

У меня есть 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>

Ответы [ 3 ]

1 голос
/ 21 февраля 2012

Что вам нужно сделать, это добавить правило, заставляющее каждый выбор требовать, а не просто говорить required: true, установить его на селектор, например так: 

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

Посмотрите, как это работает здесь: http://jsfiddle.net/ryleyb/k6dXS/

1 голос
/ 21 февраля 2012

Я бы предложил использовать классы для обозначения нужного типа проверки, как в <input type="text" name="username" class="required" /> (см. пример ).
таким образом, вы можете использовать событие change флажка длядобавьте или удалите класс required из выпадающего списка.

0 голосов
/ 10 ноября 2017

Просто добавьте простой атрибут «обязательный», как это .. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...