JSF验证onblur导致下一个字段聚焦和无效？

Question

在JSF 2.0中有以下内容： 以此为基础

<h:inputText id="email" size="60" label="Email"
            styleClass=" #{component.valid ? '' : 'input-error'}"
            value="#{familyBacking.family.email}" requiredMessage="Required">
            <f:validateRequired />
            <f:attribute name="family" value="#{familyBacking.family}" />
            <f:validator validatorId="EmailValidator" />
            <f:validator validatorId="ExistingEmailAddressValidator" />
            <f:ajax event="blur" onevent="updateFocus"
                render="email emailMessage" />
</h:inputText>

使用javascript函数

function updateFocus(obj) {
    jQuery(":input.input-error:first").focus();
}

这具有聚焦和突出显示无效字段的效果。 但是，它还允许此人切换到下一个输入字段。 所以，顺序是：

1. 用户在字段中单击其他字段或选项卡时输入无数据或无效数据。
2. 浏览器侧重于另一个领域
3. 原始场上的on blur会引发ajax。
4. 发生失效，并将类添加到输入中。 执行JS函数将焦点带回无效字段。 到目前为止一切都很好。
5. 但是，现在第二场上的onBlur会再次发射并引发整个事件。

潜在解决方案

我可以看到<f：ajax />的一个函数被调用了3次。 一次开始，一次成功，一次完成。 我想我可以做的是以某种方式禁用所有其他输入字段的模糊事件，直到我在上次执行javascript事件时重新启用它们。

关于我如何能够实现这一目标的建议？

Answer 1

我知道这对你很不安，显然你想一次只显示一条消息。 但这对最终用户来说也是令人不安的，光标不再粘在下一个字段中，最终用户被迫纠正前一个字段的验证错误而没有任何借口！ 或许最终用户在填写数据之前还需要更多的时间来考虑数据？ 当你遇到这样的表格时，你会有什么感受？ 也许你应该不改变焦点？ 也许你应该只在按下真实的提交按钮时将焦点改为第一个无效字段？

尽管如此，这是一个有趣的问题。 您确实可以挂钩<f:ajax>的onevent属性来拦截ajax请求的状态。 您确实可以使用jQuery魔法禁用（实际上，删除） onblur处理程序，然后在JSF完成其ajax作业时再次添加它（并且您已经完成了焦点工作）。 您可以使用jQuery.data()来存储和检索jQuery.data() HTML元素信息，例如原始的onblur处理程序（就像您在JSF世界中使用<f:attribute> ）：

function process(data) {
    switch (data.status) {
        case "begin":
            jQuery(":input", data.source.form).not(data.source).each(function() {
                var $this = $(this);
                $this.data("onblur", $this.attr("onblur"));
                $this.removeAttr("onblur");
            });
            break;

        case "success":
            jQuery(":input.input-error:first").focus();
            jQuery(":input", data.source.form).not(data.source).each(function() {
                var $this = $(this);
                $this.attr('onblur', $this.data("onblur"));
                $this.removeData("onblur");
            });
            break;
    }
}