jquery datepicker上的自定义动态验证直到第二个焦点才起作用

Posted 2023-05-09

【中文标题】jquery datepicker上的自定义动态验证直到第二个焦点才起作用

【英文标题】：Custom dynamic validation on jquery datepicker not working until second focus

【发布时间】：2012-07-30 14:39:51

【问题描述】：

我有一个带有验证的日期选择器，它会弹出一条消息和“！”直到用户选择一个日期 - 然后它显示一个“O”代替“！”并且部分弹出窗口会停留在屏幕上，以表明您已完成此字段。

但我遇到的问题是验证弹出窗口不会停留在屏幕上，直到您第二次将焦点放在日期选择器文本字段上。

使用验证 jquery 有很多代码，所以我真的不想在这里全部包含，但这里有一个 jsfiddle

任何想法为什么它不是第一次运行但它是后续的时间？

【参考方案1】：

看起来blur() 在选择和验证日期之前被调用。这是一个简单的解决方案：选择有效日期时淡入“O”，而不是模糊。

Working JSFiddle Demo

【讨论】：

实际上模糊是正确选择的，如果您检查元素，您会看到该元素填充了“O”字符。如果您仔细观察，当输入元素具有某些值并且通知的元素 innerhtml 和 css 被相应修改时，该元素始终可见

【参考方案2】：

问题存在于您的inputElementBlur(e) 函数中。具体来说你叫

if (!$(e).attr("required") && ($(e).val() == "" 
         || $(e).val() == $(e).attr("defaultValue"))) 
        alert('sniarf!');
        $(blurredElement).next("div.tooltipContainer").find("span.formValid").fadeOut(100);
    

我在其中添加了警报，以便您可以查看代码的行为。我看到虽然您在验证逻辑中使用 defaultValue 属性，但在设置值时实际上并没有更新它。

【参考方案3】：

没有"defaultValue" 属性这样的东西。这是一个 DOM 属性。使 O 在第一次选择后出现的修复：

http://jsfiddle.net/LeXHE/9/

然后出现了一些逻辑错误：

if (!$(e).attr("required") && ($(e).val() == "" || $(e).val() === $(e).prop("defaultValue"))) 
    $(blurredElement).next("div.tooltipContainer").find("span.formValid").fadeOut(100);

我改成了：

if (!$(e).attr("required") && $(e).val() == "") 
    $(blurredElement).next("div.tooltipContainer").find("span.formValid").fadeOut(100);

【讨论】：

这是一个自定义属性，通过 JS 填充。

属性名称不区分大小写，因此"defaultValue" 是一个极差的属性名称选择（它被视为"defaultvalue"，因此至少"defaultValue" 是多余的和误导性的）。它也是 dom 属性的精确区分大小写匹配，所以我认为这是一个错误，直到 OP 另有说明。

当然，但只是采摘有问题的代码是一个糟糕的答案恕我直言:)。此外，OP 正在询问问题出在哪里。

@Jaguar 在这方面我的回答和你的一样，除了我修改了条件而不是仅仅发出警报。