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

Question

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

当填写/选择了任何一个字段时，我需要检查是否也填写了所有其他字段以及同一div中的至少一个联系电话。 如果没有填写/选择任何字段，则表单应该成功通过。

我只能在此使用最长的时间，因为我仅设法使用了require_from_group作为联系电话，该电话至少检查了一个已填写的联系电话，但不能满足我的要求。

表单字段的HTML代码

<div id="Referral1" class="parentClass">

    <div class="form-group row">
        <div class="control-label col-md-12" style="color: #6d0017;"><strong>My Referral: </strong></div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required">Salutation</div>
        <div class="col-md-5">
            <select type="text" class="form-control" name="Referral_1_Salutation">
                <option value="" selected disabled>Please select</option>
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Mdm">Mdm</option>
            </select>
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required">Name</div>
        <div class="col-md-5">
            <input type="text" class="form-control" name="Referral_1_Name" value="" maxlength="50">
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required-atleastone" style="padding-right:0;">Contact Number (Mobile)</div>
        <div class="col-md-5">
            <input type="text" class="oneormore form-control" name="Referral_1_Contact_Number_Mobile" value="" maxlength="20">
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required-atleastone" style="padding-right:0;">Contact Number (Home)</div>
        <div class="col-md-5">
            <input type="text" class="oneormore form-control" name="Referral_1_Contact_Number_Home" value="" maxlength="20">
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required-atleastone" style="padding-right:0;">Contact Number (Office)</div>
        <div class="col-md-5">
            <input type="text" class="oneormore form-control" name="Referral_1_Contact_Number_Office" value="" maxlength="20">
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required">Email Address</div>
        <div class="col-md-5">
            <input type="text" class="form-control" name="Referral_1_Email" value="" maxlength="50">
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>

    <div class="form-group row">
        <div class="control-label col-md-4 required">Best Time to Call
            <span class="popovers" data-toggle="popover" data-content="Our office hours are from 8.45 am to 6.00 pm, Monday to Friday (except public holidays). If you send this after office hours, we will respond to you the next working day."><i class="fa fa-info-circle text-red"></i></span>
        </div>
        <div class="col-md-5">
            <select type="text" class="form-control" name="Referral_1_Best_Time_To_Call">
                <option value="" selected disabled>Please select</option>
                <option value="9am_to_12pm">9am - 12 pm</option>
                <option value="12pm_to_2pm">12pm - 2pm</option>
                <option value="2pm_to_4pm">2pm - 4pm</option>
                <option value="4pm_to_6pm">4pm - 6pm</option>
                <option value="Anytime">Anytime</option>
            </select>
        </div>
        <div class="col-md-3">
            <p class="error-msg"></p>
        </div>
    </div>
</div>

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();
        }
     });
 }

Answer 1

非常繁琐...

您创建一个条件函数以查看是否填写了其他四个字段中的任何一个，然后使用一个函数应用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/