jquery验证IE对象不支持属性

时间:2015-05-18 08:06:14

标签: jquery internet-explorer jquery-validate

我正在使用jQuery validation plugin。如果我尝试设置自定义字段以突出显示它仅在IE中显示错误(在IE11和IE10上测试)。控制台错误为Object doesn't support property or method 'closest',并指向"突出显示"一部分。

代码是:

$(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是:

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

2 个答案:

答案 0 :(得分:13)

看起来是如何在IE中传递元素值的问题,在IE中它是dom元素引用而不是jQuery对象。

使用jQuery包装元素,如

usort($teams, function($a, $b) {

    if ($a["Points"] < $b["Points"]) return -1;
    if ($a["Points"] > $b["Points"]) return 1;
    if ($a['GD'] < $b['GD']) return -1;
    if ($a['GD'] > $b['GD']) return 1;

    return 0;
});

演示:Fiddle

答案 1 :(得分:1)

我知道这是一篇旧帖子,但我认为值得更新。

传入的对象是一个dom元素,并且始终是一个dom元素。与Arun P Johny's answer

相反

问题是除了ie之外的所有浏览器都实现了自己的实验最接近的功能,允许最接近的函数直接用在dom元素上;这意味着这些浏览器不需要jquery来执行最接近的功能,这就是为什么它似乎只是IE的错误。事实上,编写的代码不是错误。

这是在2015年3月3日的Chrome上实施的,仅在此问题发布前2个月。

目前正确的方法,正如Arun P Johny的回答所解释的那样:

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

有关实验最近功能的更多信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element/closest