CODEWITHSUNDEEP
jsf-2primefaces
sathesh
sathesh

Reputation: 130

jsf form submitting issue in opera

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>&nbsp;
  </td>
        <td>&nbsp;
  </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.

Upvotes: 0

Views: 492

Answers (1)

BalusC
BalusC

Reputation: 1109422

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 adding immediate="true", or an ajax action by <f:ajax> or <p:commandLink>.

Upvotes: 1

Related Questions