Srikanth Technologies

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.

Post Your Comment

Image
Enter the code given in the above image :
Enter Your Name :
Enter Your Email Address :
Enter Your 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


Posted By Selva On 20-Feb-12 05:19:20 PM

Useful code, Thanks Lot.


Posted By kathirvel On 21-Feb-12 05:40:25 PM

this is very useful for begginers like me..


Posted By Ashokkumar On 07-Mar-12 12:44:38 PM

Here i need to pass the JSF InputText and OutputText shopping cart value into JavaScript code. I tried in different ways to pass the values. But, no result I was pasted the code below.

I want to pass this values into javascript code value="#{item.productId} , value="#{item.description}, value="#{item.quantity}" , value="#{item.price_retail}. I was pasted the code below..





Posted By Harish On 15-May-12 07:02:20 PM

Very Useful code thanks a lot sir!


Posted By Raju On 05-Jun-12 04:40:27 PM

very clear and useful code


Posted By Kikni On 04-Dec-12 04:11:08 PM

hi.. can u pls help me to put count down timer in my online quiz code.... the time duration is taken from DB.


Posted By shankar On 09-Feb-13 12:18:53 PM

Thank you so much da......i'm just a beginer in JSF.but I've completed doing my mini project's validation in Struts..plz can any on tell me which PDF i should refer for reading JSF2.1(sngkra@gmail.com)


Posted By Ruben On 14-May-14 07:09:30 PM

I would suggest using some other JS component, like code editor, since I see a lot of novice people being misled, this functionality can be served easily by required=true in the JSF code instead of JS.


Posted By SIVIS On 07-May-15 09:53:46 AM

Thnks a lot,its working fine.