form validation

[AdRock]

I have a form which validates users input and it works fine but I would like to tweak it slightly so all the error messages aren't all grouped together in one bunch above the form but each error message is displayed either above or next to the respective field on the form.

 

Is this difficult to do as I have seen it with Ajax validation forms.

 

Here is my code anyway

 

<?php

$self = $_SERVER['REQUEST_URI'];
$register = $_POST['register'];

$first_name = stripslashes($_POST['first_name']);
$last_name = stripslashes($_POST['last_name']);
$email_address = stripslashes($_POST['email_address']);
$username = stripslashes($_POST['username']);
$password1 = stripslashes($_POST['password1']);
$password2 = stripslashes($_POST['password2']);
$sex = stripslashes($_POST['sex']);

$form = "
    <form method=\"post\" action=\"$self\">

    <fieldset>
<legend>Your details</legend>
    	<p><label for=\"first_name\">Forename:</label>
    	<input type=\"text\" title=\"Please enter your first name\" name=\"first_name\" size=\"30\" value=\"$first_name\" /></p>

    	<p><label for=\"last_name\">Surname:</label>
    	<input type=\"text\" title=\"Please enter your last name\" name=\"last_name\" size=\"30\" value=\"$last_name\" /></p>

<p style=\"text-align:left\"><label for=\"sex\">Sex:</label>
    	<input style=\"border:none\" type=\"radio\" value=\"male\" checked name=\"sex\">Male <input style=\"border:none\" type=\"radio\" value=\"female\" name=\"sex\">Female</p>

    	<p><label for=\"email_address\">Email address:</label>
    	<input type=\"text\" title=\"Enter your email address\" name=\"email_address\" size=\"30\" value=\"$email_address\" /></p>
    </fieldset>
    <br />
    <fieldset>
    	<legend>Login details</legend>
    	<p><label for=\"username\">Username:</label>
    	<input type=\"text\" title=\"Please enter a username\" name=\"username\" size=\"30\" value=\"$username\" /></p>

    	<p><label for=\"password1\">Password:</label>
    	<input type=\"password\" title=\"Please enter a password\" name=\"password1\" size=\"30\" ></p>

    	<p><label for=\"password2\">Re-enter Password:</label>
    	<input type=\"password\" title=\"Please re-enter password\" name=\"password2\" size=\"30\"></p>
    </fieldset>
    <br />
    <fieldset>
<legend>Anti-spam key</legend>
    	<p>For security purposes, please enter the Anti-Spam key shown in the text box below.<br />If you have trouble reading the image, refresh the page to display a new one.</p>

    	<p><label for=\"captcha\"></label>
    	<div class=\"captcha\"><img src=\"/includes/captcha.php\" alt=\"captcha image\"></div></p>

    	<p><label for=\"verify\">Anti-Spam key:</label>
    	<input type=\"text\" title=\"Please enter the image text\" name=\"verify\" id=\"verify\" size=\"9\"/></p>
    </fieldset>

    <p><label for=\"submit\">&nbsp</label>
    <input type=\"submit\" name=\"register\" value=\"Register\" class=\"submit-button\"/>

</form>";

if($register)
{
    $valid=true;

if( !$first_name )
{ 
    $errmsg.="Please enter your first name:<br />";
    $valid=false;
}

if( !$last_name )
{ 
    $errmsg.="Please enter your last name:<br />";
    $valid=false;
}

if( !$email_address )
{
    $errmsg.="Please enter your email address:<br />";
    $valid=false;
}
else
{
	$email = trim($email);
	$_name = "/^[-!#$%&\'*+\\.\/0-9=?A-Z^_`{|}~]+";
	$_host = "([-0-9A-Z]+\.)+";
	$_tlds = "([0-9A-Z]){2,4}$/i";

	if( !preg_match($_name."@".$_host.$_tlds,$email_address))
	{
		$errmsg.="Email address has incorrect format!<br />";
		$valid=false;
	}
}

if( !$username )
{ 
    $errmsg.="Please enter a username:<br />";
    $valid=false; 
}

if( !$password1 )
{ 
    $errmsg.="Please enter a password:<br />";
    $valid=false; 
}

if( !$password2 )
{ 
    $errmsg.="Please re-enter the password:<br />";
    $valid=false; 
}

// if userid is less than 3 char then status is not ok
if( strlen($username) <3 )
{
	$errmsg.="Username should be 3 or more characters in length<br />";
	$valid=false;
}					

if( mysql_num_rows(mysql_query("SELECT username FROM users WHERE username = '$username'")) )
{
	$errmsg."The username you have selected has already been used by another member in our database. Please choose a different Username!<br />";
	$valid=false;
}					

if( mysql_num_rows(mysql_query("SELECT email_address FROM users WHERE email_address = '$email_address'")) )
{
	$errmsg.="Your email address has already been used by another member in our database. Please submit a different Email address!!<br />";
	$valid=false;
}

if ( strlen($password1) < 3 ){
	$errmsg.="Password must be more than 3 characters in legth<br />";
	$valid=false;
}					

if (strcmp( $password1,$password2 ) !=0){
	$errmsg.="Both passwords do not match<br />";
	$valid=false;
}

if (empty($_POST['verify']) && $_POST['verify'] == $_SESSION['captchstr'])
{
    $errmsg.="Please enter Anti-Spam key:<br />";
    $valid=false;
}
}

if( $valid !=true )
    {
echo( "<span style=\"font-weight: bold; color:red;\">".$errmsg."</span>" . $form );
    }

else {

//do the rest of the code

[Fadion]

Ajax may be your choice. Dreamweaver CS3 comes with the builtin Spry Ajax assets which can come very handy, but if u dont have it im sure there are a lot of tutorials. If u wanna go for server side then one alternative may be writing the validation code before the form and write error messages to variables, then print those variables to the form element they belong to.