Javascript jQuery验证和占位符冲突

我正在使用jQuery验证插件验证我站点上的表单

我还使用以下代码为不支持HTML5

Placeholder=”“

属性的浏览器提供占位符支持

// To detect native support for the HTML5 placeholder attribute
var fakeInput = document.createElement("input"),
    placeHolderSupport = ("placeholder" in fakeInput);

// Applies placeholder attribute behavior in web browsers that don't support it
if (!placeHolderSupport) {

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '') {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() { //line 20
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}

当我提交表格时，会发生以下情况：

在支持

占位符

属性的浏览器中，启动

validate（）

函数，所有操作都按预期进行

在不支持

占位符

属性的浏览器中，第20-25行清除所有“占位符”，然后触发

验证（）

函数。如果没有错误，页面将提交，所有内容都按预期工作

在不受支持的浏览器中，如果出现错误，会像往常一样应用相应的字段，但占位符文本不会返回，直到特定字段上发生

blur（）

事件。这会将这些字段留空——因为没有标签（只有

占位符

属性），所以在

blur（）

事件发生之前，用户可以猜测每个空字段应该包含什么

不受支持的浏览器的另一个问题是，由于占位符修复程序修改了

值

属性以显示占位符，因此标记为必需的字段在失败时通过验证

似乎没有简单的方法可以使用带有占位符支持代码的验证插件

---

我希望修改占位符支持代码，或者添加一个

submitHandler:{}

函数作为

validate（）

函数的参数，以便在不受支持的浏览器中工作。

您可以通过将其绑定到submit函数（通过jQuery validate或手动）来解决此问题

---

我遇到了类似的问题。你上班了吗？我想比较一下

FWIW，以下是我所做的：

向jQuery支持对象添加输入占位符：

$.support.placeholder = (function() {
    var i = document.createElement( 'input' );
    return 'placeholder' in i;
})();

$('input')
    .addClass('hint')
    .val( function() {
        if ( !$.support.placeholder ) {
            return $(this).attr('placeholder');
        }
    })
    .bind({
        focus: function() {
            var $this = $(this);
            $this.removeClass('hint');
            if ( $this.val() === $this.attr('placeholder') ) {
                $this.val('');
            }
        },
        blur: function() {
            var $this = $(this),

                // Trim whitespace if only space characters are entered,
                // which breaks the placeholders.
                val = $.trim( $this.val() ),
                ph = $this.attr('placeholder');

            if ( val === ph || val === '' ) {
                $this.addClass('hint').val('');
                if ( !$.support.placeholder ) {
                    $this.val(ph);
                }
            }
        }
    });

占位符链：

$.support.placeholder = (function() {
    var i = document.createElement( 'input' );
    return 'placeholder' in i;
})();

$('input')
    .addClass('hint')
    .val( function() {
        if ( !$.support.placeholder ) {
            return $(this).attr('placeholder');
        }
    })
    .bind({
        focus: function() {
            var $this = $(this);
            $this.removeClass('hint');
            if ( $this.val() === $this.attr('placeholder') ) {
                $this.val('');
            }
        },
        blur: function() {
            var $this = $(this),

                // Trim whitespace if only space characters are entered,
                // which breaks the placeholders.
                val = $.trim( $this.val() ),
                ph = $this.attr('placeholder');

            if ( val === ph || val === '' ) {
                $this.addClass('hint').val('');
                if ( !$.support.placeholder ) {
                    $this.val(ph);
                }
            }
        }
    });

添加新的验证规则

在验证规则对象中包含新方法

$('form').validate({
    rules: {
        name: {
            required: true,
            notPlaceholder: true
        },
        email: {
            required: true,
            notPlaceholder: true,
            email: true
        }
    }
});

---

我认为将其添加到jquery.validate.js的

required

函数（第900行）中是最好的：

required: function(value, element, param) {

        // Our change
        if (element.value == element.defaultValue) {
            return false;
        }
        // End our change

---

插件更新解决了我的问题：）

一次性解决问题：D行990获取最新版本的jquery验证，因为我发布了这条消息，终于找到了一个简单的修复方法。德克萨斯州