在我的表单上,我试图要求至少需要一个复选框。但是,'require_from_group'函数似乎没有被调用。
以下是表单:
<form>
<h2>Request your visitor's guide today.</h2>
<ol>
<li class="first-name textbox row1">
<label for="txtFirstName">First Name</label>
<input type="text" id="txtFirstName" name="FirstName">
</li>
<li class="last-name textbox row1">
<label for="txtLastName">Last Name</label>
<input type="text" id="txtLastName" name="LastName">
</li>
<li class="email-address textbox row2">
<label for="txtEmailAddress">Email Address</label>
<input type="email" id="txtEmailAddress" name="EmailAddress">
</li>
<li class="zip-code textbox row2">
<label for="txtZipCode">ZIP Code</label>
<input type="text" id="txtZipCode" maxlength="5" name="ZipCode">
</li>
<li class="street-address textbox wide row6">
<label for="txtStreetAddress">Street Address</label>
<input type="text" id="txtStreetAddress" name="Address1">
</li>
<li class="city textbox row7">
<label for="txtCity">City</label>
<input type="text" id="txtCity" name="City">
</li>
<li class="state dropdown row7">
<label for="ddlState">State</label>
<span></span>
<select id="ddlState" name="State">
<option></option>
</select>
</li>
<li class="view-online checkbox row3">
<input type="checkbox" id="chkViewOnline" name="ViewGuideOnline" class="checkbox-required" value="Yes">
<label for="chkViewOnline">View guide online</label>
</li>
<li class="mail-guide checkbox row3">
<input type="checkbox" id="chkMailGuide" name="MailGuide" class="checkbox-required" value="Yes">
<label for="chkMailGuide">Mail me a printed guide</label>
</li>
<li class="receive-offers checkbox wide row4">
<input type="checkbox" id="chkReceiveOffers" name="ReceiveOffers">
<label for="chkReceiveOffers">Receive future emails and information</label>
</li>
</ol>
<p class="commands row5"><button type="submit" id="btnSubmit">Submit</button></p>
</form>
这是我的jQuery:
form.validate({
debug: true,
onfocusout: false,
rules: {
'FirstName': 'required',
'LastName': 'required',
'EmailAddress': {
required: true,
email: true
},
'ZipCode': {
required: true,
digits: true
},
'Address1': {
addressRequired: true
},
'City': {
addressRequired: true
},
'State': {
addressRequired: true
},
'ViewGuideOnline': {
require_from_group: [1, '.checkbox-required']
},
'MailGuide': {
require_from_group: [1, '.checkbox-required']
}
},
groups : {
guides: 'ViewGuideOnline MailGuide'
},
errorPlacement: function (error, e) {
if (e.attr('name') == 'ViewGuideOnline' || e.attr('name') == 'MailGuide') {
error.insertAfter(mailGuide);
} else {
error.insertAfter(e);
}
},
highlight: function (e, errorClass, validClass) {
$(e).parent('li').addClass(errorClass).removeClass(validClass);
},
unhighlight: function (e, errorClass, validClass) {
$(e).parent('li').removeClass(errorClass).addClass(validClass);
},
submitHandler: function (form) {
form.submit();
}
});
jQuery.validator.addMethod('addressRequired', function (value, e) {
if (mailGuide.is(':checked')) {
if (value === '') {
return false;
} else {
return true;
}
} else {
return true;
}
}, 'Required');
jQuery.validator.addMethod('require_from_group', function (value, e, options) {
var validator = this;
var selector = options[1];
var validOrNot = $(selector, e.form).filter(function() {
return validator.elementValue(this);
}).length >= options[0];
if(!$(e).data('being_validated')) {
var fields = $(selector, e.form);
fields.data('being_validated', true);
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
}, 'Please select an option.');
jQuery.extend(jQuery.validator.messages, {
required: 'Required',
email: 'Invalid',
digits: 'Invalid',
require_from_group: 'Required'
});
非常感谢任何帮助。
答案 0 :(得分:0)
所以,我想出来了。我正在使用兄弟选择器和伪元素来设置复选框的样式。在我的CSS中,我将输入设置为display: none
,并且jQuery Validate不会触发隐藏的元素。