bootstrapvalidator one of two fields required

Question

I have a two phone fields on my form - phone and phone2. Only one of them is required. I have been unable to get the validation to work no matter what I have tried. I have tried callbacks and custom validators and it seems like I just can't get it to work. The way I would like it to work is check each field and if both are empty then display a custom message under each. If either one, or both, has data then go ahead and validate each for correctness. If/when the user clicks submit again, check both fields again and if either or both has status message, remove the message start validation on both all over again. I just cant' seem to get this to work and I don't know if it is as easy as somehow forcing the plugin to revalidate all (or custom selected) fields every time the submit button is hit or what.

Hopefully this makes sense. If not please ask for more detail. I've been struggling with this for a while now and have cotton head.

Basically, one of the two fields needs to have data and that data needs to be valid.

I've seen the post on stackoverflow here: Conditional validation with BootstrapValidator but it looks like the answer was for a different plugin.

Here is what I have been trying:

.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

A little late but...

You have to validate both phone values in both callback functions. When one of the phones is valid, set the other as valid.

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