Hi, there is an issue with my form I was hoping anyone would be able to help me with.
There are messages I have that appear above the form and are being hidden thanks to
CSS, however the same applies to some spans I use for the
"! " marks before the inputs, that tend to appear in the line above despite being A) in the same table column and row and B) no matter how wide I make the table column they both reside in.
These spans are mySpan1b, mySpan2b, mySpan3b, mySpan3d, and mySpan4b.
If I could get it to stop them appearing on the line above that would be all I need to get this form finished.
The relevant code is below, and if you would like to see the form in action go to
Registration Form.
The
CSS (Same for all of them):
- Code: Select all
#mySpan1a {display: none; font-family:arial; font-size:10pt; font-weight:bold;
color:red}
Relevant Code:
- Code: Select all
<html>
<head>
<title>Clothing Line</title>
<link href="admin/stylesheetCL.css" rel="stylesheet">
<?php require('admin/jscript.inc')?>
<script language='JavaScript' type='text/JavaScript'>
<!--
function Validate(f){
return (ValidateValues(f)==0 ? true : false );
}
function ValidateValues(f)
{
var Errors = 0
if((document.registration_form.Forename.value+'').length<1)
{
document.getElementById('mySpan1a').style.display='block';
document.getElementById('mySpan1a').innerHTML='Please Enter your Forename!';
document.getElementById('mySpan1b').style.display='block';
document.getElementById('mySpan1b').innerHTML='! ';
Errors++;
}
else
{
document.getElementById('mySpan1a').style.display='none';
document.getElementById('mySpan1a').innerHTML='';
document.getElementById('mySpan1b').style.display='none';
document.getElementById('mySpan1b').innerHTML='';
}
if((document.registration_form.Surname.value+'').length<1)
{
document.getElementById('mySpan2a').style.display='block';
document.getElementById('mySpan2a').innerHTML='Please Enter your Surname!';
document.getElementById('mySpan2b').style.display='block';
document.getElementById('mySpan2b').innerHTML='! ';
Errors++;
}
else
{
document.getElementById('mySpan2a').style.display='none';
document.getElementById('mySpan2a').innerHTML='';
document.getElementById('mySpan2b').style.display='none';
document.getElementById('mySpan2b').innerHTML='';
}
if(document.registration_form.Email.value =="")
{
document.getElementById('mySpan3a').style.display='block';
document.getElementById('mySpan3a').innerHTML='Please Enter an Email Address!';
document.getElementById('mySpan3b').style.display='block';
document.getElementById('mySpan3b').innerHTML='! ';
Errors++
}
else if(!document.registration_form.Email.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/))
{
document.getElementById('mySpan3a').style.display='block';
document.getElementById('mySpan3a').innerHTML='Please Enter a Valid Email Address!';
document.getElementById('mySpan3b').style.display='block';
document.getElementById('mySpan3b').innerHTML='! ';
Errors++
}
else
{
document.getElementById('mySpan3a').style.display='none';
document.getElementById('mySpan3a').innerHTML='';
document.getElementById('mySpan3b').style.display='none';
document.getElementById('mySpan3b').innerHTML='';
}
if(document.registration_form.ConfirmEmail.value =="")
{
document.getElementById('mySpan3c').style.display='block';
document.getElementById('mySpan3c').innerHTML='Please Enter an Email Address!';
document.getElementById('mySpan3d').style.display='block';
document.getElementById('mySpan3d').innerHTML='! ';
Errors++
}
else if(!document.registration_form.ConfirmEmail.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/))
{
document.getElementById('mySpan3c').style.display='block';
document.getElementById('mySpan3c').innerHTML='Please Enter a Valid Email Address!';
document.getElementById('mySpan3d').style.display='block';
document.getElementById('mySpan3d').innerHTML='! ';
Errors++
}
else
{
document.getElementById('mySpan3c').style.display='none';
document.getElementById('mySpan3c').innerHTML='';
document.getElementById('mySpan3d').style.display='none';
document.getElementById('mySpan3d').innerHTML='';
}
if(document.registration_form.Email.value !== document.registration_form.ConfirmEmail.value)
{
document.getElementById('mySpan3a').style.display='block';
document.getElementById('mySpan3a').innerHTML='The Email Addresses do not match, please re-confirm them!';
document.getElementById('mySpan3b').style.display='block';
document.getElementById('mySpan3b').innerHTML='! ';
document.getElementById('mySpan3d').style.display='block';
document.getElementById('mySpan3d').innerHTML='! ';
Errors++
}
else
{
document.getElementById('mySpan3a').style.display='none';
document.getElementById('mySpan3a').innerHTML='';
document.getElementById('mySpan3b').style.display='none';
document.getElementById('mySpan3b').innerHTML='';
document.getElementById('mySpan3c').style.display='none';
document.getElementById('mySpan3c').innerHTML='';
document.getElementById('mySpan3d').style.display='none';
document.getElementById('mySpan3d').innerHTML='';
}
if((document.registration_form.Username.value+'').length<1)
{
document.getElementById('mySpan4a').style.display='block';
document.getElementById('mySpan4a').innerHTML='Please Enter a Username!';
document.getElementById('mySpan4b').style.display='block';
document.getElementById('mySpan4b').innerHTML='! ';
Errors++;
}
else
{
document.getElementById('mySpan4a').style.display='none';
document.getElementById('mySpan4a').innerHTML='';
document.getElementById('mySpan4b').style.display='block';
document.getElementById('mySpan4b').innerHTML='! ';
}
return Errors;
}
//-->
</script>
</head>
<body>
<?php require('admin/header.inc');
require('menu.inc') ?>
<div class="DivMain">
<span class="head2">Registration Form</span><br>
<span class="errmsg">* All Marked fields required</span><br>
<span id="mySpan1a" class="mySpan1a"><?php echo $MsgForename?><br></span>
<span id="mySpan2a" class="mySpan2a"><?php echo $MsgSurname?><br></span>
<span id="mySpan3a" class="mySpan3a"><?php echo $MsgEmail?><br></span>
<span id="mySpan3c" class="mySpan3c"><?php echo $MsgConfirmEmail?><br></span>
<span id="mySpan4a" class="mySpan4a"><?php echo $MsgUser?><br></span>
<br>
<form method="post" name="registration_form" action="registration_form.php" onSubmit="return Validate(this);">
<table style="width: auto; position: absolute;">
<tr><td><span id="mySpan1b" class="mySpan1b"><?php echo $Err1?></span><span class="head4">Forename:</span><span class="errmsg"> *</span></td>
<td width="347"><label><input type="text" maxlength="15" name="Forename" value="<?php echo $Forename?>"/></label></td></tr>
<tr><td><span id="mySpan2b" class="mySpan2b"><?php echo $Err2?></span><span class="head4">Surname:</span><span class="errmsg"> *</span></td>
<td><label><input type="text" maxlength="20" name="Surname" value="<?php echo $Surname?>"/></label></td></tr>
<tr><td><span id="mySpan3b" class="mySpan3b"><?php echo $Err3?></span><span class="head4">Email:</span><span class="errmsg"> *</span></td>
<td><label> <input type="text" size="45" maxlength="50" name="Email" value="<?php echo $Email?>"/>
</label></td></tr>
<tr><td><span id="mySpan3d" class="mySpan3c"><?php echo $Err4?></span><span class="head4">Confirm Email:</span><span class="errmsg"> *</span></td>
<td><label><input type="text" size="45" maxlength="50" name="ConfirmEmail" value="<?php echo $ConfirmEmail?>"/>
</label></td></tr>
<tr><td><span id="mySpan4b" class="mySpan4b"><?php echo $Err5?></span><span class="head4">Username:</span><span class="errmsg"> *</span></td>
<td><label><input type="text" name="Username" value="<?php echo $User?>"/></label></td></tr>
<tr></tr><tr><td>
<input type="submit" style="overflow:visible; width:auto" class="buttonS"
name="SubmitB" value="Submit" onMouseOver="OverMouse(this)"; onMouseOut="OutMouse(this)"/>
<input type="reset" class="buttonS" style="overflow:visible; width:auto" name="ResetB" value="Reset" onmouseover="OverMouse(this)"; onmouseout="OutMouse(this)"/></td></tr>
</table>
</form>
</div>
Thanks in advance for your help!
Form error messages help
Mar 21st, 2008, 14:50
Similar Threads
