jquery验证IE对象不支持属性 [英] jquery validation IE Object doesn't support property

问题描述

我正在使用 jQuery验证插件。如果我尝试设置自定义字段以突出显示它仅在IE中显示错误（在IE11和IE10上测试）。控制台错误是对象不支持属性或方法'最近'并指向突出显示部分中的行。

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.

代码是：

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

推荐答案

看起来问题是元素值是怎样的在IE中传递，在IE中它是一个dom元素引用而不是jQuery对象。

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.

只需用jQuery包装元素

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

演示：小提琴

这篇关于jquery验证IE对象不支持属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！