【问题标题】:bootstrapvalidator one of two fields requiredbootstrapvalidator 必需的两个字段之一
【发布时间】:2014-09-23 20:38:57
【问题描述】:

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

【问题讨论】:

标签: javascript jquery twitter-bootstrap validation


【解决方案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'
            }
        }
    }
}

【讨论】:

    猜你喜欢
    • 2014-08-15
    • 1970-01-01
    • 2021-08-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-09
    • 2018-11-29
    • 1970-01-01
    • 2015-03-08
    相关资源
    最近更新 更多