Menu
Hi I have a working form with validation all working perfectly, however I have decided to change how I display the messages in that form.
I have both Javascript and PHP validation running and both give separate error messages and they are grouped together for convenience using a <span> tag, the only problem I have is that the error messages when they aren’t active take up too much whitespace above the form, whereas I would like them to push the form down when they become active. Can anyone see how this can be done?
[code]
<?php
session_Start();
include “admin/connect_details.php”;
$Forename = $_POST[‘Forename’];
$Surname = $_POST[‘Surname’];
$Email = $_POST[‘Email’];
$ConfirmEmail = $_POST[‘ConfirmEmail’];
$User = $_POST[‘Username’];
if (isset($_POST[‘SubmitB’]))
{
$conn = mysql_connect($Host,$Username,$Password) or die (‘Can’t connect to Server’);
if (!mysql_select_db($Dbname, $conn)) die(‘Can’t connect to Database’);
$sql = “SELECT Count(*) FROM UserAccount WHERE Username=’$User'”;
$rs = mysql_query($sql,$conn) or die(‘Problem with query: ‘ . $sql . ‘<br />’ . mysql_error());
if (!$rs) {
echo(‘<head2>Database Error! – Please Try Again</head2>’);
die();
}
if (mysql_result($result,0,0)>0) {
echo(‘<head2>That Username has been taken! – Please Try Again</head2>’);
die();
}
if(empty($Forename))
{
$Errors++;
$MsgForename = “! Please enter your Forename”;
}
if(empty($Surname))
{
$Errors++;
$MsgSurname = “! Please enter your Surname”;
}
if (!preg_match(‘/^[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i’, $Email))
{
$Errors++;
$MsgEmail = “! Please Enter a valid Email Address”;
}
elseif($Email != $ConfirmEmail)
{
$Errors++;
$MsgEmail = “! The Email Addresses do not match please re-confirm them”;
}
if(empty($User))
{
$Errors++;
$MsgUser = “! Please enter a Username”;
}
}
?>
<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’).innerHTML=’Please Enter your Forename!’;
document.getElementById(‘mySpan1b’).innerHTML=’! ‘;
Errors++;
<?php $errForename =true; ?>
}
else
{
document.getElementById(‘mySpan1a’).innerHTML=”;
document.getElementById(‘mySpan1b’).innerHTML=”;
<?php unset($errForename); ?>
}
if((document.registration_form.Surname.value+”).length<1)
{
document.getElementById(‘mySpan2a’).innerHTML=’Please Enter your Surname!’;
document.getElementById(‘mySpan2b’).innerHTML=’! ‘;
Errors++;
<?php $errSurname =true; ?>
}
else
{
document.getElementById(‘mySpan2a’).innerHTML=”;
document.getElementById(‘mySpan2b’).innerHTML=”;
<?php unset($errSurname); ?>
}
if(document.registration_form.Email.value ==””)
{
Errors++
document.getElementById(‘mySpan3a’).innerHTML=’Please Enter an Email Address!’;
document.getElementById(‘mySpan3b’).innerHTML=”;
<?php $errEmail =true; ?>
}
else if(!document.registration_form.Email.value.match(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/))
{
Errors++
document.getElementById(‘mySpan3a’).innerHTML=’Please Enter a Valid Email Address!’;
document.getElementById(‘mySpan3b’).innerHTML=’! ‘;
<?php $errEmail =true; ?>
}
else if(document.registration_form.Email.value !== document.registration_form.ConfirmEmail.value)
{
Errors++
document.getElementById(‘mySpan3a’).innerHTML=’The Email Addresses do not match, please re-confirm them!’;
document.getElementById(‘mySpan3b’).innerHTML=’! ‘;
<?php $errEmail =true; ?>
}
else
{
document.getElementById(‘mySpan3a’).innerHTML=”;
document.getElementById(‘mySpan3b’).innerHTML=”;
<?php unset($errEmail); ?>
}
if((document.registration_form.Username.value+”).length<1)
{
document.getElementById(‘mySpan4a’).innerHTML=’Please Enter a Username!’;
document.getElementById(‘mySpan4b’).innerHTML=’! ‘;
Errors++;
<?php $errUsername=true; ?>
}
else
{
document.getElementById(‘mySpan4a’).innerHTML=”;
document.getElementById(‘mySpan4b’).innerHTML=’! ‘;
<?php unset($errUsername); ?>
}
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=”errmsg”><?php echo $MsgForename?></span><br>
<span id=”mySpan2a” class=”errmsg”><?php echo $MsgSurname?></span><br>
<span id=”mySpan3a” class=”errmsg”><?php echo $MsgEmail?></span><br>
<span id=”mySpan4a” class=”errmsg”><?php echo $MsgUser?></span><br>
<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=”errmsg”></span><span class=”head4″>Forename:</span><span class=”errmsg”> *</span></td>
<td width=”300″><label><input type=”text” maxlength=”15″ name=”Forename” value=”<?php echo $Forename?>”/></label></td></tr>
<tr><td><span id=”mySpan2b” class=”errmsg”></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=”errmsg”></span><span class=”head4″>Email:</span><span class=”errmsg”> *</span></td>
<td width=”300″><label> <input type=”text” size=”45″ maxlength=”50″ name=”Email” value=”<?php echo $Email?>”/>
</label></td></tr>
<tr><td><span id=”mySpan3b” class=”errmsg”></span><span class=”head4″>Confirm Email:</span><span class=”errmsg”> *</span></td>
<td width=”300″><label><input type=”text” size=”45″ maxlength=”50″ name=”ConfirmEmail” value=”<?php echo $ConfirmEmail?>”/>
</label></td></tr>
<tr><td><span id=”mySpan4b” class=”errmsg”></span><span class=”head4″>Username:</span><span class=”errmsg”> *</span></td>
<td width=”300″><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>
</body>
</html>