bootstrapvalidator

How to validate both email using bootstrapValidator (identical)


I am using bootstrapValidator (identical) to check both email are same or not , its working fine but I want error messages in the same line, now they are in two lines. See here https://screenshots.firefox.com/abfJ97LEjpAncVoW/localhost . I tried many way and found in google but did not get any solution. Following is my validation code:

$('#formid').bootstrapValidator({

        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-alert',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstmail: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and can\'t be empty'
                    },
                     emailAddress: {
                        message: 'The input is not a valid email address'
                    },
                    identical: {
                        field: '2ndmail',
                        message: 'The email and its confirm are not the same'
                    }
                }
            },
            2ndmail: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and can\'t be empty'
                    },
                     emailAddress: {
                        message: 'The input is not a valid email address'
                    },
                    identical: {
                        field: 'firstmail',
                        message: 'The email and its confirm are not the same'
                    }
                }
            },
            },

    })

Solution

  • Following code solved my problem , I have added it below this $('#formId').bootstrapValidator({.....});

    $('#formid').bootstrapValidator({
    
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-alert',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        firstmail: {
            validators: {
                notEmpty: {
                    message: 'The email address is required and can\'t be empty'
                },
                 emailAddress: {
                    message: 'The input is not a valid email address'
                },
                identical: {
                    field: '2ndmail',
                    message: 'The email and its confirm are not the same'
                }
            }
        },
        2ndmail: {
            validators: {
                notEmpty: {
                    message: 'The email address is required and can\'t be empty'
                },
                 emailAddress: {
                    message: 'The input is not a valid email address'
                },
                identical: {
                    field: 'firstmail',
                    message: 'The email and its confirm are not the same'
                }
            }
        },
        },
    
    })
    
    .on('error.validator.bv', function(e, data) {
    // $(e.target)    --> The field element
    // data.bv        --> The BootstrapValidator instance
    // data.field     --> The field name
    // data.element   --> The field element
    // data.validator --> The current validator name
    
    data.element
        .data('bv.messages')
        // Hide all the messages
        .find('.help-block[data-bv-for="' + data.field + '"]').hide()
        // Show only message associated with current validator
        .filter('[data-bv-validator="' + data.validator + '"]').show();
    });