Form validation using jQuery plug in & JSP

Home Tutorial Jquery Form validation using jQuery plug in & JSP

Form validation using jQuery plug in & JSP
Posted on: July 29, 2010 at 12:00 AM

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

Related Tags for Form validation using jQuery plug in & JSP:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics