jQuery require_from_group 如果表单域是 filled/selected

Question

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

当任一字段为 filled/selected 时，我需要检查所有其他字段和同一 div 中的至少一个联系电话是否也已填写。如果没有字段是 filled/selected，表单应该成功通过。

我被困在这个问题上的时间最长，因为我只设法使用 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/

jQuery require_from_group 如果表单域是 filled/selected

jQuery require_from_group if a form field is filled/selected

jquery

jquery-validate