XHTML strict Validation problem

[Ronan]

Hi there,

I'm trying to get my site (for a school project) to validate to strict XHTML.
I have a form on one of the pages that is causing a problem.

The attribute 'name' on my Form isn't valid in XHTML strict. If i change it to 'id' my Javascript won't work.. Here is my code:

THE TABLE:

<table width="800" border="0">
<tr>
<td><form name="my_form" method="post" action=""
Xonsubmit="return validateForm(my_form);">
<fieldset>
<p>
<label> <br />
First Name:
<input name="name1" type="text" />
<br />
<br />
</label>

<label> Last Name:
<input name="name2" type="text" />
</label>
<br /> <br />
<label> Email:
<input name="email" type="text" />
</label>
<br /><br />
<label>What do you need to Know:</label>
<br />
<textarea name="question" cols="40" rows="12"></textarea>

<br /><br />
<input name="submit1" type="submit"/>
<input name="reset1" type="reset" />
<br /><br />
</p>
</fieldset>
</form></td>
<td><img src="Gallery/painting1.jpg" width="339" height="450" alt="Oil Painting" /></td>
</tr>
</table>

THE JAVA SCRIPT:

<script type = "text/javascript">

function validateForm(my_form)
{

if(""==document.forms.my_form.name1.value)
{
alert("Please enter your first name.");
return false;
}

if(""==document.forms.my_form.name2.value)
{
alert("Please enter your last name.");
return false;
}

if(""==document.forms.my_form.email.value)
{
alert("Please enter your email address.");
return false;
}

ANy ideas to get it to validate and work.

Thanks.

[chrishirst]

don't use deprecated attributes with a XHTML Doctype.

Use a HTML Strict DTD and when using tables for layout a HTML4.01 is appropriate

[Ronan]

Ok thanks for that.

So I should change the table to 2 DIvs and float one on the right (and set the width of them in the CSS style sheet) - is this what you mean (sorry I'm new to this).

I tryed that and I can't get the form and image to align:

<div id="form">
<form name="my_form" method="post" action=""
onsubmit="return validateForm(my_form);">
<fieldset>
<p>
<label> <br />
First Name:
<input name="name1" type="text" />
<br />
<br />
</label>

<label> Last Name:
<input name="name2" type="text" />
</label>
<br /> <br />
<label> Email:
<input name="email" type="text" />
</label>
<br /><br />
<label>What do you need to Know:</label>
<br />
<textarea name="question" cols="40" rows="12"></textarea>

<br /><br />
<input name="submit1" type="submit"/>
<input name="reset1" type="reset" />
<br /><br />
</p>
</fieldset>
</form></div>
<div>
<img src="Gallery/painting1.jpg" width="339" height="450" alt="Oil Painting" />
<p> </p>
</div>

Here's the css I used:

#form {

float: left;
width: 400px;
}

Do i need to add css to float the image right?
Thanks for the help

[chrishirst]

Forms are block level elements and does NOT need to be contained by the superfluous <div> to apply a float.

The <p>aragraph should not be inside the fieldset

what is the purpose of the empty <p> element and the extra <br>s?
Padding should be used for extra space around the inside edges of element, and margins used for space on the outside edges of elements.

Why do you need a XHTML DTD? there is no XML involved in the code provided.

[Ronan]

I need XHTML DTD as that is the outline of the school project I have to do.

I go rid of the <p> and there was no reason for the empty one so i removed that.

The reason why I put the Form in a DIv was to apply CSS to it. For some reason if I put ID="my_form" instead ofname="my_form" the Javascript no longer works.

I got the 2 elements aligned but I sitll have my original problem of the form not validating.

[meesa]

What are the errors? Link if possible, that or update your code.

[Ronan]

This is the error:

Line 102, Column 38: there is no attribute "name"

<form action="" method="post" name="my_form"

[chrishirst]

I need XHTML DTD as that is the outline of the school project I have to do

Excellent, schools and colleges teaching history in all subjects.

The name attribute has been deprecated on the form element in XHTML.

use the document.forms[0].elementName.value construct or getElementById('id').value