使用 jQuery Validation 和 jQuery Placeholder Enhanced 验证失败后占位符消失

Posted 2023-03-05

【中文标题】使用 jQuery Validation 和 jQuery Placeholder Enhanced 验证失败后占位符消失

【英文标题】：Placeholders disapears after validation fails using jQuery Validate and jQuery Placeholder Enhanced

【发布时间】：2012-06-24 13:05:57

【问题描述】：

我有一个包含多个输入字段的公式的站点。在所有这些输入字段中，我都有包含一些描述的占位符属性。 但是我们都知道占位符属性在 IE 中不起作用，所以我也使用 jQuery Placeholder Enhanced 来使占位符在 IE 中显示。这行得通。

但同时我正在使用 jQuery validate 来验证我的表单。当我按下提交按钮并且验证失败时，所有占位符在 IE 中都消失了。

我的验证如下所示：

$(".myForm").validate(
    submitHandler: function (form) 
        $.post("/handlers/CustomHandler.ashx", $(".myForm").serialize(),
            function (data) 
                if (data.result.type == "message") 
                    $(".myForm").parent().html(data.result.data);
                
                else if (data.result.type == "redirect") 
                    location.href = data.result.data;
                
            
        );
     
);

我尝试过使用 invalidHandler 选项并再次触发 placeholderEnhanced() 函数，如下所示：

$(".myForm").validate(
    submitHandler: function (form) 
        $.post("/handlers/CustomHandler.ashx", $(".myForm").serialize(),
            function (data) 
                if (data.result.type == "message") 
                    $(".myForm").parent().html(data.result.data);
                
                else if (data.result.type == "redirect") 
                    location.href = data.result.data;
                
            
        );
     ,
     invalidHandler: function () 
        if (!Modernizr.input.placeholder) 
            $('input[placeholder], textarea[placeholder]').placeholderEnhanced();
        
     
);

但不幸的是，它不起作用。 如果我复制粘贴这一行：

$('input[placeholder], textarea[placeholder]').placeholderEnhanced();

进入我的 IE 控制台并在验证发现一些错误后触发它，占位符再次显示。 我也尝试过发出警报（“表格中有错误”）；在 if-sentence 中，当按下表单中的提交按钮时显示。

任何人都有一些线索可以知道什么是错误的，以及如何在按下提交按钮后使占位符在 IE 中不消失并且验证无效。

提前致谢！

/金

【参考方案1】：

问题可能出在 jquery.placeholder.js 中的这段代码中：

    // Blank on submit -- prevents submitting with unintended value
    this.form && $( this.form ).submit( function() 
      // $input.trigger( 'focus' ); would be problematic
      // because it actually focuses $input, leading
      // to nasty behavior in mobile browsers
      if ( $input.hasClass('placeholder') ) 
        $input
       .val( '' )
        .removeClass( 'placeholder' );
       
    );

在触发 jquery.validate 的 validate 方法后，jquery 会将提交处理传递给此代码。我注释掉了这段代码，占位符在 IE 中停止消失。我在服务器端检查占位符填充的字段。但是如果你想在提交之前清空这些值，你应该以某种方式阻止调用这个方法以防提交错误。如果我弄清楚确切的位置，我会在这里写一个评论。