client side validation and tooltip - jsf-2

Question

I have jsf validation on form where the invalid fields are highlighted based on
styleClass="#{component.valid ? 'reportInput' : 'reportInput_invalid'}"
and a tooltip is being used for displaying the error message as follows
<p:tooltip for="inputFieldId">
<p:message for="inputFieldId" />
</p:tooltip>
Everything works as expected but i want to improve user experience and want to introduce pure client side validation using
<p:clientValidator />
I tried this but it didnt work when onBlur event is fired on inputfield i got the following JS error
'null' is Null or no Object
in validation.js.jsf and the line code is
d.data("uiMessageId",b.attr("id"))
Is it possible to achieve?
An example of my input field is:
<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>
I am using Primefaces 4 with the following maven dependency
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>4.0</version>
</dependency>
Here as it looks in jsf page head section
Here is the validation.js file that is being used
validatuion.js here

Answer 1

i had the exact same error.
it seems that the validator.js code searches for a message container attached to the field, and, if cant find one, it searches one in the nearest form "e.findUIMessage(a,d.closest("form").find("div.ui-message"))"
what you need is to have an tag,
that is, a message assigned for the inputtext, so, when the validator generates an error, it can post the text in that message container.