twitter bootstrap 3 - How to check if jsf component is valid in xhtml -

twitter bootstrap 3 - How to check if jsf component is valid in xhtml -

i using bootstrap css create simple form forgot password reminder. if password not validate, display error , highlight input accordingly. problem when first load page saying username invalid. how prepare this?

<h:form id="forgotpassword" styleclass="mar-top30 mar-bot30"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <h3>password reminder</h3> <div class="input-group input-group-lg #{!username.valid ? 'has-error' : 'none'} mar-top15 mar-bot15"> <span class="input-group-addon"> <i class="fa fa-user"></i> </span> <h:inputtext id="username" value="#{viewaccount.username}" styleclass="form-control input-lg" required="true" requiredmessage="please come in username" p:placeholder="username"> <f:validatelength maximum="20" minimum="3" /> <f:validator validatorid="forgotpasswordvalidator"/> </h:inputtext> </div> <h:panelgroup layout="block" rendered="#{username.valid}" styleclass="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <h:message for="username"/> </h:panelgroup> <h:commandbutton type="submit" value="send reset link" action="#{viewaccount.forgotpassword()}" styleclass="btn btn-lg btn-default btn-block" /> <h:link outcome="login" styleclass="btn btn-lg btn-warning btn-block mar-top15"><i class="fa fa-reply"></i> homecoming login</h:link> </div> </div> </h:form>

you need add together binding username , utilize check if component valid or alternatively,

add method application bean , utilize in ui

public static boolean isvalid(string clientid) { uicomponent comp = facescontext.getcurrentinstance(). getviewroot().findcomponent(clientid); if(comp instanceof uiinput) { homecoming ((uiinput)comp).isvalid(); } throw new illegalaccesserror(); }

and in ui

<h:panelgroup layout="block" rendered="#{facesutil.isvalid('forgotpassword:username')}" styleclass="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <h:message for="username"/> </h:panelgroup>

jsf twitter-bootstrap-3 jstl