You are Here: Home >Jsp>Jsf Tutorial >Using Javascript to Validate Form

Using Javascript to Validate Form

text zoom
Previous: Using Managed Bean With JSF -2 Adding Navigation in JSF Application :Next

JavaScript is mostly used scripting language in web world. All the browsers support JavaScript which makes JavaScript more popular among all categories of web programmers. Now we will look how do we use the JavaScript with the JSF application to validate out registration form. The following are the steps of including the JavaScript in the JSF application.


Step 1:-Write the validate function in the JavaScript using the <script> tag. We are putting the following checks in the registration.jsp page.




    • All fields are required. It means no field accept the blank. We need to supply the value for each field.

    • The password and retype password should match.



Note:- In JSF the form name is appended with the name of the fields when the HTML is rendered on the browsers. So for validation one need to use the form name and a colon(:) with the field name. For example, if we have password for the form1, then in JavaScript we need to use form1:password to get the object.


Step 2:- Calling the validate function on the onsubmit event of the form.


We need to call the validate method in order to validate the user specified values in the JSF. The code for this is :-
<h:form id="form1" onsubmit="return validate();">


The following is the code for Registration.jsp after adding the JavaScript's validate method.










<%@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"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<%--
This file is an entry point for JavaServer Faces application.
--%>


<script>
function validate(){
  if(document.form1["form1:name"].value ==''){
   alert("Please enter the name");
   return false;
  }
  if(document.form1["form1:password"].value ==''){
    alert("Please enter the Password");
    return false;
  }
  if(document.form1["form1:password1"].value ==''){
   alert("Please enter the Retype Password");
   return false;
  }
  if(document.form1["form1:password1"].value !=document.form1["form1:password"].value){
    alert("Passwords do not match");
    return false;
  }
  if(document.form1["form1:description"].value ==''){
    alert("Please enter the description");
    return false;
  }
return true;
}
</script>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <h1 align="center"> Registration Page</h1>
</head>
<body>

<f:view>

<h:form id="form1" onsubmit="return validate();">
<table align="center">
<tr>
   <td>Name:</td>
   <td><h:inputText id="name" label="Name" value="#{RegistrationBean.name}"/></td>
</tr>
<tr>
   <td>Password:</td>
   <td><h:inputSecret id="password" label="Password" value="#{RegistrationBean.password}"/></td>
</tr>
<tr>
   <td>Retype Password:</td>
   <td><h:inputSecret id="password1" label="Retype Password" value="#{RegistrationBean.password1}"/></td>
</tr>
<tr>
   <td>Description</td>
   <td><h:inputTextarea id="description" rows="10" cols="30" value="#{RegistrationBean.description}"/></td>
</tr>
<tr>
   <td colspan="2" align="center"><h:commandButton id="submit" action="success" value="Submit" /></td>
</tr>
</table>


</h:form>
</f:view>
</body>
</html>


Note:- We can also use the server side validation by writing some methods in the backing beans. This we will learn in coming sections.

                    
Previous: Using Managed Bean With JSF -2 Adding Navigation in JSF Application:Next
Give feedback and win a prize.

Jsp Source Code

...more

New Jsp Resources

...more

Copyright © 2013 VisualBuilder. All rights reserved