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

Image

Enter the code given in the above image :
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!


Posted By Anand Kumar On 29-Mar-10 12:04:34 PM

how can i get the values from a jsp page(in JSF) to a normal jsp page;
i tried for String str =request.getParameter("#{LoginBean.name}"); its not working.


Posted By sharad On 15-Jun-11 02:49:00 PM

var domNode = document.getElementById('form1:txtSscScience');
domNode.focus(); is not working please help me


Posted By Krishnakumar On 21-Jun-11 06:45:03 AM

Very useful for beginners like me... thanks a lot........


Posted By rahul sharma On 08-Aug-11 05:54:29 PM

i wont to validate check box of jsf component selectBooleanCheckbox by using java script.
The key issue that how to create group of selectBooleanCheckbox whether we can use id of check box for validation in java script


Posted By sahul vetcha On 25-Sep-11 05:06:16 PM

Useful article


Posted By vinod On 22-Jan-12 10:03:45 PM

sir,
this is vinod..
i have one doubt.......i urge you to clarify my doubt( it may be silly for you)
.how to create tables dynamically i.e, using gui ....in java

Copyright © Srikanth Technologies. All rights reserved.