Spotlight highlights a certain component on page. In this particular example, panel is highlighted on validation error.
<script>
//<![CDATA[
function handleForm(xhr, status, args) {
if (args.validationFailed)
PF('spot').show();
else
PF('spot').hide();
}
//]]>
</script>
<div class="card">
<h:form>
<p:growl id="growl"/>
<p:panel id="pnl" header="New User">
<p:messages id="messages"/>
<h:panelGrid columns="3" id="grid" cellpadding="7">
<p:outputLabel for="username" value="Username"/>
<p:inputText id="username" value="#{spotlightView.username}" required="true">
<f:validateLength minimum="2"/>
</p:inputText>
<p:message for="username"/>
<p:outputLabel for="email" value="Surname:"/>
<p:inputText id="email" value="#{spotlightView.email}" required="true"/>
<p:message for="email"/>
</h:panelGrid>
<p:commandButton value="Save" icon="pi pi-check" action="#{spotlightView.save}" update="growl grid"
oncomplete="handleForm(xhr, status, args)" styleClass="mt-3"/>
</p:panel>
<p:spotlight target="pnl" widgetVar="spot"/>
</h:form>
</div>
@Named
@RequestScoped
public class SpotlightView {
private String username;
private String email;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public void save() {
username = null;
email = null;
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've registered"));
}
}