How to update form input field background colour on validation error

[AdRock]

I have been searching for form validation scripts for ages and all th ones that I like are far too complicated and inflexible so I decided to stick with my own which is easier to understand.

 

The only thing I don't like which i have seen on better form validation scripts is that and fields with errors are highlighted.  i can only presume that they have used php to set the background color of the input field or textarea.

 

How would I add some code to change the background colour of form elements if an error is found?

 

Here is my code which validates the form but doesn't change form elements colours.

 

<?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

[MadTechie]

this is a CSS question really

 

echo( "<span style=\"font-weight: bold; color:red; background-color:#00FFFF;"\">".$errmsg."</span>" . $form );

 

note the background-color:#00FFFF;

[samoht]

Also, if you want to change the input if($errmsg) You may try adding a class to the <input> set it to normal or nothing and if $errmsg then change to error -

 

<?php 
if($errmsg){ echo "<input type=\"text\" class=\"error\" title=\"Please enter your first name\" name=\"first_name\" size=\"30\" value=\"$first_name\"  /></p>";} else { echo "<input type=\"text\" title=\"Please enter your first name\" name=\"first_name\" size=\"30\" value=\"$first_name\"  /></p>"