使用占位符提交表单，颜色不会从第一次单击 jQuery 中触发答案

【问题标题】：Submitting form with placeholders, color not firing from first click jQuery使用占位符提交表单，颜色不会从第一次单击 jQuery 中触发
【发布时间】：2011-10-06 21:43:07
【问题描述】：

所以我有一个表格给了我两个问题。

1.当我单击一次提交按钮时，会触发验证消息（很好），但是占位符的文本颜色并没有改变，如果我单击它两次，它会完全改变。我需要在第一次更改它，只要有错误，它就应该更改。

2。假设您为名称输入任何值，例如字母 e，然后点击两次提交，占位符文本会覆盖输入的内容。我不需要在文本上显示占位符，因为那里有一个值。

这是我的小提琴http://jsfiddle.net/Lqb6q/

知道如何解决这个问题吗？

【问题讨论】：

标签： jquery forms validation submit placeholder

【解决方案1】：

问题是您正在监听点击事件，而不是您应该监听提交事件。

改变这个：

$('#submit-ticket').click(function() {
if($('input').hasClass('error')) {
$("label.overlabel-apply").css('cssText', 'color: red !important');
}
});

到这里：

$('#ticket-form').submit(function() {
    if($('input').hasClass('error')) {
        $("label.overlabel-apply").css('cssText', 'color: red !important');
    }
    $('input').each(function(){
        if($(this).val().length){
            hideLabel($(this).attr('id'), true);
        }
    });
});

See it in action.

【讨论】：

谢谢，这解决了问题的第一部分。知道如何修复第 2 部分吗？
谢谢 Shef，工作就像一个魅力。您介意解释第二个 if 条件以便我更好地理解吗？
@Maverick：hideLabel() 是overlabels.js 中的一个函数。我放置了一个 if 语句来查看该字段是否有值，如果有，则悬停在该字段上的标签将被该文件上的函数隐藏。

【解决方案2】：

这个问题可能是有两个“标签”元素与每个“输入”相关联。尽管官方 HTML 规范允许这样做，但用户代理显示这一点存在一些问题。看看here。

尝试用 span 或 div 替换其中一个标签。

【讨论】：