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>

javascript部分没有被执行。为什么呢？

Answer 1

要严格回答您的问题，请检查javascript错误控制台。您将看到的错误消息之一如下（来自我的FireFox）。

TypeError: document.form.firstname is undefined

解决问题的最简单方法是在prependId="false"中添加<h:form>。

如果您不喜欢prependId = "false"方法，也可以更改

document.form.firstname

到

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

这需要在整个Javascript方法中完成，因此请记住这一点。

请注意，您的组件id（例如p:inputText id="firstname"...）将具有以下模式formId:componentId。那就是form:firstname。当然，这是一个简化的解释，但情况并非总是如此。有关更多信息，请参阅

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

此外，确定组件id的最简单方法是只查看HTML代码（右键单击＆gt;查看页面源）。

在你的情况下，确实不需要{p> <f:view>（除非我们当然没有看到更多）。像erencan建议的那样也可以参考这个链接

When to use f:view and f:subview

jsf中的javascript无法正常工作

1 个答案: