jsf中的javascript不起作用答案

【问题标题】：javascript in jsf not workingjsf中的javascript不起作用
【发布时间】：2013-07-25 00:40:25
【问题描述】：

<?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 部分没有被执行。为什么？

【问题讨论】：

你永远不会在你的 javascript 中返回真值。您是否也尝试过 onstart 而不是 onclick？
你能在之间移动吗？此外，这里不需要使用。 stackoverflow.com/a/8883572/892994
document.userreg.fname.focus(); 是什么？
其实就是document.form.fname.focus();

标签： jsf primefaces

【解决方案1】：

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

TypeError: document.form.firstname is undefined

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

如果您不喜欢 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 代码（右键单击> 查看页面源代码）。

<f:view> 在您的情况下确实不需要，（除非我们当然没有看到更多内容）。喜欢erencan建议也参考这个链接

When to use f:view and f:subview

【讨论】：