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>

UserBean.java

Here is the code for UserBean.java. It contains two properties (fields and corresponding getter and setter methods) and login() method to process login.

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.