javascript - bootstrapvalidator 必填的两个字段之一

Question

我的表单上有两个电话字段 - 电话和电话2。只需要其中之一。无论我尝试什么，我都无法使验证生效。我尝试过回调和自定义验证器，但似乎我无法让它工作。我希望它的工作方式是检查每个字段，如果两个字段都为空，则在每个字段下显示一条自定义消息。如果其中一个或两者都有数据，则继续验证每个数据的正确性。如果/当用户再次单击“提交”时，请再次检查这两个字段，如果其中一个或两个字段都有状态消息，请删除消息并重新开始对两个字段进行验证。我似乎无法让它工作，我不知道它是否像每次点击提交按钮时强制插件重新验证所有(或自定义选择的)字段一样简单。

希望这是有道理的。如果没有，请询​​问更多详细信息。我已经为此苦苦挣扎了一段时间并且有棉花头。

基本上，两个字段之一需要有数据，并且该数据需要有效。

我在这里看到了 stackoverflow 上的帖子:Conditional validation with BootstrapValidator但看起来答案是针对不同的插件。

这是我一直在尝试的:

.bootstrapValidator({
    live: 'disabled',
    message: 'This value is not valid',
    fields: {
        phone: {
            group: '.col-md-3',
            validators: {
                callback: {
                    callback: function(value, validator, $field) {
                        field_name = $($field).attr('name');
                        if (value.length == 0 && $('#phone2').val() == '') {
                            return {
                                valid: false,
                                message: 'at least one phone number is required'
                            }
                        }
                        else
                        {
                            if ( $('#phone2') == '' )
                            {
                                $('#defaultForm')
                                        .bootstrapValidator('resetField', $('#phone2') )
                                        //.bootstrapValidator('updateStatus', $('#phone2'), 'NOT_VALIDATED')
                                        ;
                            }
                        }
                        value = value.replace(/\D/g, '');
                        if ( value != '' ) {
                            if ( !((/^(?:(1\-?)|(\+1 ?))?\(?(\d{3})[\)\-\.]?(\d{3})[\-\.]?(\d{4})$/).test(value) && (value.length == 10)) ) {
                                //alert("PHONE DID NOT PASS VALIDATION");
                                return {
                                    valid: false,
                                    message: 'Phone number is not valid'
                                }
                            }
                            else
                            {
                                return true;    
                            }
                        }
                        else
                        {
                            $('#defaultForm')
                                    .bootstrapValidator('resetField', field_name )
                                    .bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED')
                                    ;
                            return true;
                        }
                    }
                }
            }
        },
        phone2: {
            group: '.col-md-3',
            validators: {
                callback: {
                    callback: function(value, validator, $field) {
                        field_name = $($field).attr('name');
                        if (value.length == 0 && $('#phone').val() == '') {
                            return {
                                valid: false,
                                message: 'at least one phone number is required'
                            }
                        }
                        else
                        {
                            if ( $('#phone') == '' )
                            {
                                $('#defaultForm')
                                        .bootstrapValidator('resetField', $('#phone') )
                                        //.bootstrapValidator('updateStatus', $('#phone'), 'NOT_VALIDATED')
                                        ;
                            }
                        }

                        value = value.replace(/\D/g, '');
                        if ( value != '' ) {
                            if ( !((/^(?:(1\-?)|(\+1 ?))?\(?(\d{3})[\)\-\.]?(\d{3})[\-\.]?(\d{4})$/).test(value) && (value.length == 10)) ) {
                                //alert("PHONE2 DID NOT PASS VALIDATION");
                                return {
                                    valid: false,
                                    message: 'Phone number2 is not valid'
                                }
                            }
                            else
                            {
                                return true;    
                            }
                        }
                        else
                        {
                            $('#defaultForm')
                                    .bootstrapValidator('resetField', field_name )
                                    .bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED')
                                    ;
                            return true;
                        }
                    }
                }
            }
        }
    }
})

Answer 1

有点晚了，但是...

您必须验证两个回调函数中的两个电话值。当其中一部手机有效时，将另一部手机设置为有效。

fields: {
    phone: {
        validators: {
            callback: {
                callback: function (value: any, validator: any, field: any) {
                    // Get the value of the field 'phone2'
                    const phone2 = validator.getFieldElements('phone2').val();

                    // Neither phone and phone2 are valid?
                    if (!value && !phone2) {
                        return false;
                    }

                    // phone is valid. Update validity of phone2.
                    validator.updateStatus('phone2', validator.STATUS_VALID);
                    return true;
                },
                message: 'at least one phone number is required'
            }
        }
    },
    phone2: {
        validators: {
            callback: {
                callback: function (value: any, validator: any, field: any) {
                    // Get the value of the field 'phone'
                    const phone = validator.getFieldElements('phone').val();

                    // Neither phone2 and phone are valid?
                    if (!value && !phone) {
                        return false;
                    }

                    // phone2 is valid. Update validity of phone.
                    validator.updateStatus('phone', validator.STATUS_VALID);
                    return true;
                },
                message: 'at least one phone number is required'
            }
        }
    }
}