如果填写/选择了表单字段,则jQuery require_from_group

我有一个页面,允许人们输入最多五个非强制性推荐的详细信息。 每组推荐都包含在自己的div

当填写/选择任何一个字段时,我需要检查同一个div中的所有其他字段和至少一个联系号码是否也被填充。 如果未填写/选择任何字段,则表单应成功通过。

我被困在这个时间最长,因为我只设法使用require_from_group作为检查至少一个填写的联系号码的联系号码,但它不符合我的要求。

表单字段的HTML代码

 
My Referral:
Salutation
Please select Mr Mrs Ms Mdm

Name

Contact Number (Mobile)

Contact Number (Home)

Contact Number (Office)

Email Address

Best Time to Call
Please select 9am - 12 pm 12pm - 2pm 2pm - 4pm 4pm - 6pm Anytime

jQuery函数,它当前检查是否需要填充至少一个联系号码

 var initCustomerReferralFormComponents = function() { jQuery.validator.addMethod("require_from_group_contact", function (value, element, options) { var validator = this; var minRequired = options[0]; var selector = options[1]; var validOrNot = jQuery(selector, element.form).filter(function () { return validator.elementValue(this); }).length >= minRequired; // remove all events in namespace upload jQuery(selector, element.form).off('.require_from_group_contact'); if (this.settings.onkeyup) { jQuery(selector, element.form).on({ 'keyup.require_from_group_contact': function (e) { jQuery(selector, element.form).valid(); } }); } if (this.settings.onfocusin) { jQuery(selector, element.form).on({ 'focusin.require_from_group_contact': function (e) { jQuery(selector, element.form).valid(); } }); } if (this.settings.click) { jQuery(selector, element.form).on({ 'click.require_from_group_contact': function (e) { jQuery(selector, element.form).valid(); } }); } if (this.settings.onkeyup) { jQuery(selector, element.form).on({ 'keyup.require_from_group_contact': function (e) { jQuery(selector, element.form).valid(); } }); } return validOrNot; }, "Fill in all fields."); $("#customer_referral").validate({ rules: { Referral_1_Contact_Number_Mobile: { require_from_group_contact: [1, ".oneormore"] }, Referral_1_Contact_Number_Home: { require_from_group_contact: [1, ".oneormore"] }, Referral_1_Contact_Number_Office: { require_from_group_contact: [1, ".oneormore"] } }, highlight: function(element, errorClass) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, errorPlacement: function (error, element) { $(element).closest('.form-group').find('.error-msg').text(error.text()); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success') }, submitHandler: function(form) { console.log('form submit'); form.submit(); } }); } 

这很乏味……

您创建条件函数以查看是否填写了其他四个字段中的任何一个,然后使用函数应用require_from_group规则的参数。

对其他字段执行相同操作,而是使用required规则。

相应调整。

 rules: { Referral_1_Contact_Number_Mobile: { require_from_group: function(element) { if ($('[name="Referral_1_Salutation"]').is(':filled') || $('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Email"]').is(':filled') || $('[name="Referral_1_Best_Time_To_Call"]').is(':filled')) { return [1, ".oneormore"]; } else { return [0, ".oneormore"]; } } }, .... // repeat same for remaining contact numbers .... Referral_1_Salutation: { required: function(element) { return ($('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Email"]').is(':filled') || $('[name="Referral_1_Best_Time_To_Call"]').is(':filled') || $('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')); } }, .... // repeat same for remaining other fields .... 

工作演示: http : //jsfiddle.net/cd5gy73u/


编辑

许多代码可以用skip_or_fill_minimum规则替换:

http://jsfiddle.net/yo2vjwus/