0

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>
3
Contributors
8
Replies
13
Views
6 Years
Discussion Span
Last Post by Airshow
0

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 by Airshow: n/a

0

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?

Edited by raghujosh: n/a

0

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

0

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

Edited by raghujosh: n/a

0

Fill the background-color for demo.

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

Check that the layer is staying where it should be.

0

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

Edited by Airshow: n/a

0

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.

Edited by raghujosh: n/a

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.