Using JavaScript with JSF

It is often required to validate JSF components on the client using JavaScript. Though JSF provides validators, they validate data on the server and not on the client.

So, what if i want to validate a JSF component on the client using JavaScript?

Here is a simple login page using JSF inputText components to take username and password. We use JavaScript to check whether user entered data into textboxes. The key issue is client ID of the components. ID of the HTML component rendered by JSF component is formed using formid:componentid. So, if form id is loginform and component id is uname then the ID of the INPUT element rendered by JSF is loginform:uname.

Here is login.jsp, which takes username and password and copies the data into properties of UserBean managed bean. The code in UserBean is not really important in this example, so I am just providing only the skeleton for that.

Lines in bold are the ones to focus on.

login.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<script language="javascript">
    function validate() {
        var uname = document.getElementById("loginform:uname");
        if ( uname.value == "")
        {
            alert("Please enter username!");
            return false;
        }
        var pwd = document.getElementById("loginform:pwd");
        if ( pwd.value == "")
        {
            alert("Please enter password!");
            return false;
        }
        return true;
    }
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Login</title>
    </head>
    <body>
        <f:view>
            <h1>Login</h1>
            <h:form id="loginform" onsubmit="return validate()">
                <table>
                    <tr>
                        <td>Username : </td>
                        <td><h:inputText  id="uname" value="#{UserBean.uname}"></h:inputText></td>
                    </tr>
                    <tr>
                        <td>Password : </td>
                        <td><h:inputSecret id="pwd" value="#{UserBean.pwd}"></h:inputSecret></td>
                    </tr>
                </table>
                <p/>
                <h:commandButton action="#{UserBean.login}" value="Login" />
            </h:form>
        </f:view>
    </body>
</html>
Here is the code for UserBean.java. It contains two properties (fields and corresponding getter and setter methods) and login() method to process login.

UserBean.java 


public class UserBean {

    private String uname;
    private String pwd;

    public String getUname() {
        return uname;
    }
    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public String login(){
       // code for login
    }
}
Run login.jsp and test by clicking on Login button without entering data into textboxes. An alert window will be displayed by JavaScript and submission is aborted.

Home    Blogs

Post Your Comment

Your Name :
Your Email Address :
Comment :

Comments
Posted By muthu On 27-Oct-09 07:52:08 PM

Very useful above code thanks thanks............


Posted By Advo On 23-Nov-09 05:35:27 PM

But how comes this does not work when using webuijsf:textField id="uname" binding="#{userBean.Login}"


Posted By Pradip Kundu On 30-Nov-09 11:30:51 AM

I want to get a jsf program that from javascript to put the outputtext value set


Posted By Mayank On 12-Jan-10 08:43:04 PM

Very helpful..thanks!