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":""
        });
    }
}