jquery validation IE Object doesn't support property

Question

I am using the jQuery validation plugin. If i try to set custom field to highlight it shows an error only in IE (tested on IE11 and IE10). Console error is Object doesn't support property or method 'closest' and points to the line in "highlight" part.

The code is:

$(document).ready( function(){
    $("#formPost_connection").validate({
        rules: {
            mail: {
                required: true
            }
        },
        messages: {
            mail: {
                required: "Please enter your email address or username"
            }
        },
        errorElement : 'div',
        errorPlacement: function(error, element) {
            var parent = element.closest('.form-group');
            error.insertAfter(parent);
        },
        highlight: function(element, errorClass) {
            var parent = element.closest('.form-group');
            $(parent).addClass('field-error');
        },
        unhighlight: function(element, errorClass) {
            var parent = element.closest('.form-group');
            $(parent).removeClass('field-error');
        }
    }); 
});

HTML of form is:

<form id="formPost_connection" autocomplete="on" method="POST" name="" action="">
                    <fieldset>
                        <div class="form-group">
                            <label for="account_login">Email address / User name:</label>
                            <div class="input-wrapper">
                                <input id="account_login" type="text" name="mail" title="Enter your email address or user name" required />
                            </div>
                        </div>
                        <div class="password-field-wrapper">
                            <div class="form-group" style="margin-bottom: 0;">
                                <label for="mdp">Password:</label>
                                <div class="input-wrapper">
                                    <input id="mdp" type="password" name="mdp" title="Enter your password" required />
                                </div>
                            </div>
                            <a title="Did you forget your password?" class="forgot-password" href="/reset-password">Forgot your password?</a>
                        </div>    

                        <button class="btn" type="submit">Log In</button>
                    </fieldset>
                </form>

Answer 1

I know this is an old post, but I thought it was worthwhile updating.

The object passed in is a dom element, and will always be a dom element. Contrary to Arun P Johny's answer

The issue is that all browsers apart from ie have implemented their own experimental closest functionality, allowing the closest function to be used directly on dom elements; This means jquery was not required for those browsers to perform the closest functionality, this is why it appears to be an IE only bug. In fact it is not a bug the code written is at fault.

This was implemented on chrome on 03/03/2015, only 2 months before this question.

The correct approach currently, as explained by Arun P Johny's answer is:

$(element).closest('.form-group')

For further information on the experimental closest functionality please refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Answer 2

Looks to be an issue with how the element value is passed in IE, in IE it is a dom element reference not a jQuery object.

Just wrap element with jQuery like

$(document).ready(function () {
    $("#formPost_connection").validate({
        rules: {
            mail: {
                required: true
            }
        },
        messages: {
            mail: {
                required: "Please enter your email address or username"
            }
        },
        errorElement: 'div',
        errorPlacement: function (error, element) {
            var parent = $(element).closest('.form-group');
            error.insertAfter(parent);
        },
        highlight: function (element, errorClass) {
            var parent = $(element).closest('.form-group');
            $(parent).addClass('field-error');
        },
        unhighlight: function (element, errorClass) {
            var parent = $(element).closest('.form-group');
            $(parent).removeClass('field-error');
        }
    });
});

Demo: Fiddle