jQuery 验证和占位符冲突

Posted 2023-03-05

【中文标题】jQuery 验证和占位符冲突

【英文标题】：jQuery Validation and Placeholder conflict

【发布时间】：2011-05-23 13:06:50

【问题描述】：

我正在使用 jQuery Validation 插件来验证我网站上的表单。

http://docs.jquery.com/Plugins/Validation

我还使用以下代码为不支持 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('');
            
        );
    );

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

在支持placeholder 属性的浏览器中，validate() 函数会触发，并且一切正常。

在不支持 placeholder 属性的浏览器中，第 20-25 行清除所有“占位符”，然后触发 validate() 函数。如果没有错误，页面就会提交并且一切正常。

在不受支持的浏览器中，如果出现错误，则会像往常一样应用相应的字段 class="error" - 但占位符文本不会在特定字段上发生 blur() 事件之前返回。这会将这些字段留空 - 由于没有标签（只有 placeholder 属性），用户只能猜测每个空字段应该包含什么，直到 blur() 事件发生。

不受支持的浏览器存在的另一个问题是，由于占位符修复修改了value 属性以显示占位符，因此标​​记为必需的字段在它们应该失败时通过验证。

似乎没有简单的方法将验证插件与占位符支持代码一起使用。

我希望修改占位符支持代码或将submitHandler: 函数作为参数添加到validate() 函数，以使其在不受支持的浏览器中工作。

【参考方案1】：

我遇到了类似的问题。你让你的工作了吗？我想比较一下笔记。

FWIW，这就是我所做的：

jsfiddle demo here.

向 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);
                
            
        
    );

添加新的验证规则

addMethod docs

$.validator.addMethod('notPlaceholder', function(val, el) 
    return this.optional(el) || ( val !== $(el).attr('placeholder') );
, $.validator.messages.required);

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

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

【参考方案2】：

我认为最好将其添加到 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 验证

【参考方案3】：

Placeholder插件更新解决了我的问题:)

【讨论】：

终于找到了一个简单的解决方法。交易

【参考方案4】：

您可以通过将 this 绑定到提交函数来解决这个问题（通过 jQuery 验证或手动）

 if(element.val() == text)
      element.val('');