javascript in jsf not working

Question

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <f:view>
    <h:head>
        <title>Admin Welcome</title>

        <!-- this is the javascript part! -->
        <script>
            function validateForm()
                {
                    if(document.form.firstname.value=="" || document.form.lastname.value=="" || document.form.mobileno.value=="")
                        {
                            alert("first/lastname/mobile number should not be left blank");
                            document.userreg.fname.focus();
                            return false; 
                        }
                    if(!isNaN(document.form.firstname.value) || !isNaN(document.form.lastname.value) )
                        {
                            alert("Please Enter Only Characters for first/last names");
                            return false;
                        }
                    if(isNaN(document.form.mobileno.value))
                        {
                            alert("please enter only Numbers for mobile number")
                            return false;
                        }


                }               
        </script>
    </h:head>

    <h:body>
        Welcome admin!
        <center><h1>User Registration Form</h1></center>
        <center><h:form id="form">  

            <p:panel id="panel">  

        <p:messages id="msgs"/>  

        <h:panelGrid columns="3" >  
            <h:panelGroup>
            <h:outputLabel for="firstname" value="firstname: *" />  
            <p:inputText id="firstname" value="#{userBean.firstname}" required="true" label="firstname">  

            </p:inputText>  

            <br></br> <br></br>
            <h:outputLabel for="lastname" value="lastname: *" />  
            <p:inputText id="lastname" value="#{userBean.lastname}" label="lastname" required="true">  


            </p:inputText>  
            <br></br><br></br>
            <h:outputLabel for="mobileno" value="mobileno: *" />  
            <p:inputText id="mobileno" value="#{userBean.mobileno}" label="mobileno" required="true">  


            </p:inputText>  

  </h:panelGroup>
        </h:panelGrid>  
        <br></br>
        <p:commandButton ajax="false" id="btn" value="submit" type='submit' onclick="return validateForm()" />  
        <p:commandButton value="reset" type="reset" />
    </p:panel>  

            </h:form></center>
    </h:body>

    </f:view>
</html>

the javascript part is not getting executed. why?

You never return true value in your javascript. Also have you tried onstart instead of onclick? — erdimeola, Jul 24 '13 at 12:34
can you move between ? Furthermore, using is unnecessary for here. http://stackoverflow.com/a/8883572/892994 — erencan, Jul 24 '13 at 12:59

score 1 · Accepted Answer · edited May 23 '17 at 11:54

To strictly answer your question, check the javascript error console. One of the error messages that you will see is the following (from FireFox on my end).

TypeError: document.form.firstname is undefined

The easiest way to fix your issue is to add prependId="false" in your <h:form>.

If you do not like the prependId = "false" approach, you could also change

document.form.firstname

to

document.form["form" + ":" + "firstname"].value

This will need to be done throughout your Javascript method, so keep this in mind.

Remember that your components id such as p:inputText id="firstname"... for example will have the following pattern formId:componentId. It would then be form:firstname. Of course this is a simplified explanation and this may not always be the case. For more information please refer to

How can I know the id of a JSF component so I can use in Javascript

Also, the easiest way to determine component id is to simply view the HTML code (right click > View Page Source).

<f:view> is really not needed in your case, (unless there's more we're not seeing of course). Like erencan suggested refer to this link also

When to use f:view and f:subview

javascript in jsf not working

1 Answers1