Javascript form validation for a JSP

Question

raghujosh 0 Junior Poster

13 Years Ago

I am trying to do some simple form validation in a JSP. But the javascript just does not work....as if its just not there. Dont know what is amiss.
Here is my code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>
function validateForm()
{
    if(document.frm.login.value=="")
    {
      alert("User Name should be left blank");
      document.frm.login.focus();
      return false;
    }
    else if(document.frm.password.value=="")
    {
      alert("Password should be left blank");
      document.frm.password.focus();
      return false;
    }
}
</script>

<title>Insert title here</title>
 
</head>
<body>
<img src="cs6.jpg" width=1200 Height=200 alt="some_text"/>
<div style="
			margin-top:50px;
			margin-left:100px;
			margin-right:100px;
			margin-bottom:50px;
			">

<div style="width:500px;height:200px;border:2px solid blue;

			padding-top:100px;
			padding-left:120px;
			padding-right:50px;
			padding-bottom:20px;
			">	

<form action = "LoginServlet" method = "post" name = "frm" onsubmit = "return validateForm()">
<table cellspacing="5" border="0">
<tr>
	<td align="right"">Login:</td>
	<td><input type="text" name="login"></td>
</tr>
<tr>
	<td align="right"">Password:</td>
	<td><input type="password" name="password"></td>
</tr>
<tr>
	<td align="center"></td>
	<td><input type="submit" value="Submit" ></td>
</tr>
</form>
</table>


</div>
</div>


</body>
</html>

javascript

3 Contributors
8 Replies
1K Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

The only obvious problems are:

unbalanced quotes <td align="right""> (twice)
unbalanced tags <form><table> ... </form></table>

But, for me, neither of these prevents the validation function working.

Try saving the page locally with .html extension and without the <%@ page ... %> directive and see if that makes a difference.

If it still doesn't work then maybe try a different browser.

That's all I can think of. Not solutions but may help you debug.

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Raghujosh,

The divs shouldn't affect the javascript but it could be that the line breaks are messing things up.

Try building the divs like this, which is equivalent:

<div style="margin:50px 100px">
<div style="width:500px;height:200px;border:2px solid blue; padding:100px 50px 20px 120px;">
...
</div>
</div>

For margin/padding/border:
1 value: All four sides
2 values: top&bottom right&left
3 values: top right&left bottom (IIRC)
4 values: top right bottom left

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

raghujosh 0 Junior Poster · Answer 1 · 2011-06-12T10:44:08+00:00

The only obvious problems are:
unbalanced quotes <td align="right""> (twice)

unbalanced tags <form><table> ... </form></table>

But, for me, neither of these prevents the validation function working.
Try saving the page locally with .html extension and without the <%@ page ... %> directive and see if that makes a difference.
If it still doesn't work then maybe try a different browser.
That's all I can think of. Not solutions but may help you debug.
Airshow

Thanks, but I narrowed down the the problem. The two <div> tags which encapsulate the form fields are the issue. I removed the tags and the javascript works pretty well. So my next question is how do we enable javascript within the <div> tags?

raghujosh 0 Junior Poster · Answer 2 · 2011-06-12T22:33:45+00:00

Raghujosh,
The divs shouldn't affect the javascript but it could be that the line breaks are messing things up.
Try building the divs like this, which is equivalent:
<div style="margin:50px 100px">
<div style="width:500px;height:200px;border:2px solid blue; padding:100px 50px 20px 120px;">
...
</div>
</div>
For margin/padding/border:
1 value: All four sides
2 values: top&bottom right&left
3 values: top right&left bottom (IIRC)
4 values: top right bottom left
Airshow

Airshow,
Thanks, your suggestion helped. I built the divs as per ur suggestion and the javascript worked. But I am a little confused about how to go about the margin/padding/border. My divs currently look like this

<div style="margin:50px 100px">
  
      <div style="width:500px;height:200px;border:2px solid blue; padding:100px 50px 20px 120px;">
  
      ...
  
      </div>
      </div>

I dont know where the margin/padding code should go. Currently my margins are broken. I did not quite understand ur suggestion about the margins.
Raghu

ko ko 97 Practically a Master Poster · Answer 3 · 2011-06-13T06:49:29+00:00

Fill the background-color for demo.

<div style="margin: 50px 100px; background-color: red;">

Check that the layer is staying where it should be.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-06-13T06:58:13+00:00

Raghujosh,

You seem to be getting some strange behaviour from your browser. Your original code should have worked as should the amended version.

Are you using something exotic like webTV or a beta release of a regular browser?

I don't think your doctype/html tags are at fault, but you could try :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Might possibly make a difference.

Another thought, which editor are you using? MS Word is notorious for causing problems particularly when "smartquotes" are turned on. I recommend Notepad or Notepad++ .

Airshow

raghujosh 0 Junior Poster · Answer 5 · 2011-06-13T07:11:22+00:00

Raghujosh,
You seem to be getting some strange behaviour from your browser. Your original code should have worked as should the amended version.
Are you using something exotic like webTV or a beta release of a regular browser?
I don't think your doctype/html tags are at fault, but you could try :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Might possibly make a difference.
Another thought, which editor are you using? MS Word is notorious for causing problems particularly when "smartquotes" are turned on. I recommend Notepad or Notepad++ .
Airshow

I develop my applications in Eclipse IDE. These pages are part of a bigger web development project. So its code generated by the IDE. I use FireFox browser for testing my project. I am using the stable release of firefox(3.6.17) and not 4.00. Your code is working fine(Javascript wise). The margins are reduced. I did not understand the last few points of your second answer. The following in your second answer is what I did not understand

"For margin/padding/border:
1 value: All four sides
2 values: top&bottom right&left
3 values: top right&left bottom (IIRC)
4 values: top right bottom left"

Can you pls clarify where the margin and padding code should go and how should the entire <div> tag should look like.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2011-06-13T07:26:19+00:00

All should be fine with Eclipse/FF - no worries there.

My point about margin/padding was just an explanation of what 2/3/4 values mean in case you didn't already know. I implemented 2-value and 4-value directives in the inline styles for your divs. Unless I made a mistake, they should be exactly equivalent to your original styles, just more concise.

Airshow