IE 中与 jquery 验证器一起使用的占位符

Posted 2023-05-08

【中文标题】IE 中与 jquery 验证器一起使用的占位符

【英文标题】：Placeholders in IE that work with jquery validator

【发布时间】：2012-01-23 18:37:43

【问题描述】：

我正在尝试验证在 IE7 + 8 中使用占位符的 html 5 表单。

我使用了 Validation 插件中的 valid() 调用来进行 jquery。这意味着我不能使用这个解决方案：placeholder issue with jQuery Validate。我的问题是一样的。我使用的占位符脚本将占位符文本添加到 value 属性。当调用验证时，脚本会读取占位符文本作为有效输入。

我没有进行全面验证，因为表单分布在多个“选项卡”上，因此需要在显示下一部分之前进行验证。这是没得商量的

我的占位符脚本：

    $('[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.val() == input.attr('placeholder')) 
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        
    ).blur();

    $('[placeholder]').parents('form').submit(function() 
        $(this).find('[placeholder]').each(function() 
            var input = $(this);
            if (input.val() == input.attr('placeholder')) 
                input.val('');
            
        )
    );

这就是我所说的验证：

if (elements.valid() === 0) 
    valid = 0;


if (valid) 
    $('.form').removeClass('error');
    $(this).closest('section').hide().next().show();

任何帮助将不胜感激！

【问题讨论】：

尝试[验证占位符的通用方法][1] [1]：***.com/a/15898568/657357

【参考方案1】：

您可以尝试重新定义验证器的默认所需功能。在调用验证之前添加：

    jQuery.validator.addMethod("required", function(value, element, param) 
        // check if dependency is met
        if ( !this.depend(param, element) ) 
            return "dependency-mismatch";
        
        if ( element.nodeName.toLowerCase() === "select" ) 
            // could be an array for select-multiple or a string, both are fine this way
            var val = $(element).val();
            return val && val.length > 0;
        
        if ( this.checkable(element) ) 
            return this.getLength(value, element) > 0;
        
        default:
            var placeholderval = $(element).attr('placeholder');
          //if some placeholder values are actually default values, just use "default" attribute to mark them
            var defaultvar = ($(element).attr('default') === undefined);
            return ($.trim(value).length > 0 && ($.trim(value)!=$.trim(placeholderval) || !defaultvar));
    , jQuery.validator.messages.required);