View Full Version : My Validate Form Function... Doesn't validate.

12-09-2009, 08:09 PM
Hello all,

I have a form that submits a POST request when data is submitted.

A Servlet then processes this POST request and a JavaBean is used to make some calculations. The HTML response is not generated within the Servlet but instead I forward the request to a JSP to generate the response. - This all works fine, thankfully.

However, I am stupidly suck trying to validate the form on the client side with a JavaScript function before the form is submitted. Here is my index.jps:

Document : index
Created on : 19-Nov-2009, 13:41:30
Author : lk00043

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/JavaScript">
<!-- Start hiding JavaScript Statements
function validateForm() {

var student;
var score1, score2, score3, score4;

student = document.getElementById('student');
s1 = document.getElementById('score1');
s2 = document.getElementById('score2');
s3 = document.getElementById('score3');
s4 = document.getElementById('score4');

score1 = parseInt(s1.value);
score2 = parseInt(s2.value);
score3 = parseInt(s3.value);
score4 = parseInt(s4.value);

if(student.value.length == 0) {
document.getElementById('StudentError1').innerHTML = " Enter a student name!";
return false;

if ((isNaN(score1)) || (score1 < 0) || (score1 > 100)) {
document.getElementById('Error1').innerHTML = " Enter a number between 0 and 100!";
return false;

if ((isNaN(score2)) || (score2 < 0) || (score2 > 100)) {
document.getElementById('Error2').innerHTML = " Enter a number between 0 and 100!";
return false;

if ((isNaN(score3)) || (score3 < 0) || (score3 > 100)) {
document.getElementById('Error3').innerHTML = " Enter a number between 0 and 100!";
return false;

if ((isNaN(score4)) || (score4 < 0) || (score4 > 100)) {
document.getElementById('Error4').innerHTML = " Enter a number between 0 and 100!";
return false;
// End hiding JavaScript Statements -->
<title>Lab Class 7 - Task 2</title>
<h1>Lab Class 7</h1>
<form name="collectgrades" action="AssessGrades" method="POST" onSubmit="validateForm()" >
Name of Student: <input type="text" name="student" id="student"/><span id="StudentError1"> </span><br />
Presentation: <input type="text" name="score" id="score1"/><span id="Error1"> </span><br />
Writing style: <input type="text" name="score" id="score2"/><span id="Error2"> </span><br />
Technical content: <input type="text" name="score" id="score3"/><span id="Error3"> </span><br />
Depth of analysis: <input type="text" name="score" id="score4"/><span id="Error4"> </span><br />
Feedback:<select name="feedback" size="4" multiple="multiple">
<option>"Could be better structured."</option>
<option>"Depth of analysis is good."</option>
<option>"Very advanced material."</option>
<option>"Very well structured."</option>
</select><br />
<input type="submit" value="Submit" />

Regardless of whether incorrect input is given, the data is still POSTed to the server and calculated on or a Server Side error is given.

Am I correct in calling the function onClick?

The validation essentially needs to be so that:

- Student field contains a string
- Score1, Score2, Score3 and Score 4 contain a number between 0 and 100

Any help is most appreciated,



Philip M
12-09-2009, 08:58 PM
onSubmit=" return validateForm()"

The <!-- and //--> comment (hiding) tags have not been necessary since IE3. If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

Passengers Hit By Cancelled Trains. - Woking News and Mail

12-09-2009, 10:22 PM
Cheers mate solved!