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/

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

1 个答案: