I have created a JSF web page where I want to do validation on focus out i.e border color of textfield should changed to red if user left it unfilled. I am calling highlightBorder() method onChange event but it didnt worked. Please suggest me right way I am new to JSF part.
xhtml code
<div class="control-row">
<div class="table">
<div class="cell cell-label1">
<h:outputLabel value="#{pprmsgs.specialist_surname}">
<font style="color: red">*</font>
</h:outputLabel>
</div>
<div class="cell">
<h:inputText styleClass="p-name-demo exempt nameExempt"
id="demoSurNameId" tabindex="4"
value="#{specialistViewManager.specViewBean.givenName}"
onchange="initialCaps(this);setInputDirty();highlightBorder(this);"
maxlength="50" autocomplete="off">
<p:ajax event="blur" global="false"></p:ajax>
</h:inputText>
</div>
</div>
</div>
Script.js : In this file I have implemented method highlightBorder() to change border color for input box
function highlightBorder(Stringobj)
{
if(Stringobj.value == "")
{
$(this).css({
"border":"2px solid red"
});
}
else
{
$(this).css({
"border":""
});
}
}
Try onkeyup event instead of onchange.
<input type="text" onkeyup="myFunction()">