I am using jsf 2.0 with primefaces. In my application i have login page ,and i have include this login all the pages and it display on primefaces lightbox(inline method)… it is working fine in all the browsers except opera… But in opera when i click the login button it is not getting validated as well as the form also not submitted …
My index.xhtml
<h:body style="background:url(images/index_bg.jpg) repeat-x;">
<!--Header-->
<ui:include src="/webheader.xhtml"></ui:include>
<!--End Header-->
<!--Menu-->
<ui:include src="/webmenu.xhtml"></ui:include>
.............
</h:body>
webheader.xhtml
..............
<p:lightBox style="display:inline;" width="1010px"> <h:outputLink
value="Registration.xhtml">Register</h:outputLink> </p:lightBox>|
<p:lightBox style="display:inline;" width="810px" group="false">
<h:outputLink value="#">
<h:outputText value="Login"/>
</h:outputLink>
<f:facet name="inline">
<ui:include src="login.xhtml"></ui:include>
</f:facet>
</p:lightBox>
...........................
my login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<script type="text/javascript">
function resetval() {
document.getElementById("loginid:log_pass_input").value = null;
document.getElementById("loginid:log_pass_input").focus();
}
</script>
</h:head>
<h:body>
<f:view>
<!-- Login -->
<div class="login">
<h:form id="ajxstaform">
<p:ajaxStatus style="width:16px;height:16px;"
id="ajaxStatusPanel">
<f:facet name="start">
<h:graphicImage value="../images/ajax-
loader.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:form>
<div class="loginInner">
<table width="90%" border="0" cellspacing="0" \
cellpadding="0">
<tr>
<td><h1>Login</h1>
</td>
</tr>
<tr>
<td>
<div class="loginTEXT">
<table width="80%"
border="0" align="center" cellpadding="0"
cellspacing="0"
id="loginPanel">
<tr>
<td>
</td>
<td>
</td>
</tr>
<h:form id="loginid"> <tr>
<td width="34%" align="center"><p>Email Id</p>
</td>
<td width="66%" align="center"><h:inputText
value="#{loginBean.email_id}" id="log_email"
binding="#{login}" required="true"
requiredMessage="Enter the Email ID" immediate="true"
validatorMessage="Invalid Email ID">
<p:ajax event="blur" update="msg1" />
<f:validateRegex
pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
</h:inputText></td>
<td width="100%" align="center"><h:message
for="log_email" id="msg1" styleClass="alert" />
</td>
</tr>
<tr>
<td align="center"><p>Password</p>
</td>
<td align="center"><p:password
value="#{emailBean.password}" id="log_pass"
feedback="false" required="true"
requiredMessage="Enter the Password" immediate="true">
<p:ajax event="blur" update="msg2" />
<f:validator validatorId="loginValidator" />
<f:attribute name="login" value="#{login.value}" />
</p:password></td>
<td align="center"><h:message for="log_pass" id="msg2"
styleClass="alert" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<div>
<p:commandButton value="Login"
action="#{commonControl.loginCtrl}"
update="ajxstaform:ajaxStatusPanel,loginid,msg1,msg2"
oncomplete="resetval()">
</p:commandButton>
</div></td>
</tr>
</h:form>
<tr>
<td colspan="2" align="center"><p:spacer height="20px"
width="27px"></p:spacer> <h:form>
<h:commandLink
action="#{registrationControl.forgotpasswordredirect}">
<b>Forgot Password</b>
</h:commandLink>
</h:form> <!-- <a href="PasswordReset.xhtml" title="Forgot password">Forgot Password</a> -->
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</div>
</f:view>
<!--End Login -->
</h:body>
</html>
Thanks in advance.
You’ve there invalid HTML syntax. A
<table>element cannot have a<form>as direct child, but only<thead>,<tbody>,<tfoot>and/or<tr>. The browser behaviour is unspecified in case of invalid HTML. Whilst most browsers are forgiving and leinient on this kind of developer mistakes and attempts to auto-correct it, the Opera browser is known to be extremely strict on this.Rearrange the JSF
<h:form id="loginid">component accordingly so that your code ultimately generates valid HTML. You can put the<h:form>around the<table>or inside the<td>, but certainly not somewhere in between them. You could achieve this by just putting the entire table in a single form and get rid of the nested<h:form>for the “forgot password” link by making it a normal<h:link>, or a non-validating action by addingimmediate="true", or an ajax action by<f:ajax>or<p:commandLink>.