Form validation using jQuery plug in & JSP


 

Form validation using jQuery plug in & JSP

In this tutorial, we will discuss about form validation using jQuery plug in & display of submit content using JSP.

In this tutorial, we will discuss about form validation using jQuery plug in & display of submit content using JSP.

Form validation using jQuery plug in & JSP

In this tutorial, we will discuss about form validation using jQuery plug in & display of submit content using JSP. In the given below example a form is given ,whose fields  like name, email, url, content is validated using jQuery plug in. After successful validation, the submitted content is displayed by the JSP page.

The plug in is added to html using following code line :

<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

formValidation.html

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk
/plugins/validate/jquery.validate.js"
></script>
  <script src="formValidation.js" type="text/javascript"></script>
  <style type="text/css">
    * { font-family: Verdana; font-size: 11px; line-height: 14px; }
    .submit { margin-left: 125px; margin-top: 10px;}
    .label { display: block; float: left; width: 120px; text-align: right;
 margin-right: 
5px; }
    .form-row { padding: 5px 0; clear: both; width: 700px; }
    label.error { width: 250px; display: block; float: left; color: red; 
padding-left: 
10px; }
    input[type=text], textarea { width: 250px; float: left; }
    textarea { height: 50px; }
  </style>
  </head>
<body>
    <form id="form" method="post" action="formValidation.jsp">
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name"
 
id="namei"/></div>
<div 
class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" id="emaili"/></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" 
id="urli" /></div>
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment"
id="commenti"></textarea></div>
      <div class="form-row"><input class="submit" type="submit" value="Submit" name="submit" 
id=
"submiti"></div>
</form>

</body>
</html>

formValidation.js

$(document).ready(function() {
  $("#form").validate({
        rules: {
          name: "required",// simple rule, converted to {required:true}
          email: {// compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
 });

formValidation.jsp

 <%page language="java" contentType="text/html;charset=UTF-8" 
pageEncoding=
"UTF-8"%>
<%
String name=request.getParameter("name");
String email=request.getParameter("email");
String url=request.getParameter("url");
String comment=request.getParameter("comment");
%>
<h3><font color=red>YOUR COMMENT IS SUBMITTED SUCCESSFULLY!!</font></h3>
<b><font color=blue>
<%
out.println("NAME : "+name);
%><br><%
out.println("EMAIL :  "+email);
%><br><%
out.println("URL : "+ url);
%><br><%
out.println("COMMENT : "+comment);
%>
</font>

OUTPUT 

If the email /URL is not valid or  You press 'submit ' without entering anything :

 

The correct validate data is :

After submitting successfully :

 

Download Source Code

Ads