bootstrapvalidator需要两个字段之一

时间:2014-09-23 20:38:57

标签: javascript jquery twitter-bootstrap validation

我的表格上有两个电话字段 - 电话和电话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;
                        }
                    }
                }
            }
        }
    }
})

1 个答案:

答案 0 :(得分:0)

有点晚了,但是...

您必须在两个回调函数中验证两个电话值。其中一部电话有效时,将另一部电话设为有效。

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'
            }
        }
    }
}