如果填写/选择了表单字段,则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
规则替换: