jquery validation plugin showing multiple error messages per field

Just noticed this issue today when using the validation plugin inside a bootstrap modal. The exact same code works fine when NOT in a modal. No clue what is happening with this, but it appears as though it doesn't overwrite a previous message.

html:

<div class="col-md-12 margin-bottom-30 form-group">
    <label class="f-14"><b>First Name :</b></label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-user fa-fw"></i>
        </span>
        <input class="form-control" type="text" name="settings[fname]" <?php echo ($result['fname'] ? 'data-default="true" value="'.$result['fname'].'"' : ''); ?> placeholder="first name"/>
    </div>
</div>

js:

errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
    'settings[fname]': {
        cname: true
    },
    'settings[lname]': {
        cname: true
    },
    'settings[company]': {
        ccompany: true
    },
    'settings[phone]': {
        required: true,
        cphone: true
    },
    'settings[username]': {
        required: true,
        cuser: true,
        rangelength: [5, 30],
        remote: {       
            url: "/spc_admin/process/p_check_username_change.php",  
            type: "post",
            data: {'original_username': originalUsername },
        }
    },
    'settings[email]': {
        required: true,
        cemail: true
    },
    'settings[password]': {
        rangelength: [10, 30],
        cpass: true
    }
},

messages: {
    'settings[fname]': {
        cname: "Enter a valid first name."
    },
    'settings[lname]': {
        cname: "Enter a valid last name."
    },
    'settings[company]': {
        ccompany: "Enter a valid company name."
    },
    'settings[phone]': {
        required: "Phone is required.",
        cphone: "Enter a valid phone number."
    },
    'settings[username]': {
        required: "Username is required.",
        cuser: "Enter a valid username.",
        rangelength: jQuery.validator.format("Enter between {0} and {1} characters.")
    },
    'settings[email]': {
        required: "Email is required.",
        cemail: "Enter a valid email."
    },
    'settings[password]': {
        rangelength: jQuery.validator.format("Enter between {0} and {1} characters.")
    }
},

highlight: function (element) { // hightlight error inputs
    $(element)
        .closest('.form-group').addClass('has-error');
},

unhighlight: function (element) { // un-hightlight error inputs
    $(element)
        .closest('.form-group').removeClass('has-error'); 
},

errorPlacement: function (error, element) {
    error.insertAfter(element.closest('.input-group'));
},
... and so on

custom validation although it shouldn't matter :

// custom name (first or last) validation
$.validator.addMethod("cname", function (value,element) {
    return this.optional(element) || /^[a-z][a-z\ \.\,\-]{0,31}$|^$/i.test(value);
},"Please enter a valid name.");

Is there an issue with modals in the latest version? I do not remember this ever happening before so it just came out of nowhere. Same code works fine when it is not within a modal.