客户端验证和工具提示答案

【问题标题】：client side validation and tooltip客户端验证和工具提示
【发布时间】：2014-03-13 12:29:01
【问题描述】：

我在表单上进行了 jsf 验证，其中无效字段基于

突出显示

styleClass="#{component.valid ? 'reportInput' : 'reportInput_invalid'}"

并且正在使用工具提示来显示错误消息，如下所示

<p:tooltip for="inputFieldId">
    <p:message for="inputFieldId" />
</p:tooltip>

一切都按预期工作，但我想改善用户体验并希望引入纯客户端验证使用

<p:clientValidator />

我试过了，但是当 onBlur 事件在 inputfield 上触发时它不起作用我得到了以下 JS 错误

'null' is Null or no Object
in validation.js.jsf and the line code is
d.data("uiMessageId",b.attr("id"))

有可能实现吗？

我的输入字段的一个例子是：

<p:inputText id="bic" 
styleClass="#{component.valid ? 'reportInput' : 'reportInput_invalid'}" 
value="#{bean.bic}" 
required="true" requiredMessage="Field value is required" >
    <p:watermark for="bic" value="CMHJKLIL" />
    <pe:keyFilter regEx="/[a-z0-9]/i" />
    <f:validateLength minimum="8" />
    <p:clientValidator/>
</p:inputText>

我正在使用具有以下 maven 依赖项的 Primefaces 4

 <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>4.0</version>
    </dependency>

这里看起来就像在 jsf 页面头部部分

这是正在使用的validation.js 文件 validatuion.js here

【问题讨论】：

请显示您使用<p:clientValidator>的代码。如果没有代码，我们将无法为您提供更多帮助。
我已经为一个输入字段添加了代码。
您正在使用<p:inputMask/>，但我没有看到任何mask 属性。您确定要使用 <p:inputMask> 而不是 <p:inputText> 吗？编辑：我认为你已经做出了改变。
对于这个字段我不使用 p:inputMask，它使用 p:inputText，我已经编辑了这个。
你有这个文件validation.js.jsf吗？如果可以，可以给我们看看相关代码吗？

标签： jsf-2 primefaces

【解决方案1】：

我遇到了完全相同的错误。

validator.js 代码似乎在搜索附加到该字段的消息容器，如果找不到，它会以最接近的形式搜索一个 "e.findUIMessage(a,d.closest("form") .find("div.ui-message"))"

你需要的是有一个标签，也就是说，为 inputtext 分配了一条消息，因此，当验证器生成错误时，它可以将文本发布到该消息容器中。

【讨论】：

例如：