Outputting Form Input Errors underneath fields

codeline · August 17, 2010

I built a basic form with certain fields required. When a required field isn't filled, the errors are echoed but not in the best area. I'd like for each error message to be displayed underneath their respected input fields. What do I need to look into?

<?php 
if(!empty($_POST['submit']))
{
// set variables
$name = mysql_real_escape_string($_POST['name']);
$email = mysql_real_escape_string($_POST['email']);
$email2 = mysql_real_escape_string($_POST['email2']);
$age = mysql_real_escape_string($_POST['age']);
$city = mysql_real_escape_string($_POST['city']);
$state = mysql_real_escape_string($_POST['state']);


// 1A. REQUIRED FIELDS VERIFICATION
if(!empty($name) && !empty($email) && !empty($email2) &&  !empty($city) &&  !empty($state))
{

// 1B. END REQUIRED FIELDS VERIFICATION
} else {
	echo '<img src="images/icon_error.png" alt="" title="" /> Please fill out the required fields.<br />';

	if (empty($name))
	{
		echo 'Whats your name?!<br />';	
	} if (empty($email))
	{
		echo 'No email given.<br />';	
	} if (empty($email2))
	{
		echo 'Please verify your email<br />';	
	} if (empty($city))
	{
		echo 'What city are you from?<br />';	
	} if (empty($state))
	{
		echo 'What State!<br />';	
	}

	echo '<br /><br />';
}
// 1B. END REQUIRED FIELDS ERROR CODES

}
?>

<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">

<div class="formSec"><label for="name" class="required">Full Name:</label>
<input type="text" name="name" id="name" value="" /></div>

<div class="formSec"><label for="email" class="required">Email:</label>
<input type="text" name="email" id="email" value="" /></div>

<div class="formSec"><label for="email2" class="required">Confirm Email:</label>
<input type="text" name="email2" id="email2" value="" /></div>

<div class="formSec"><label for="age" class="required">Age:</label>
<input type="text" name="age" id="age" value="" /></div>

<div class="formSec"><label for="city" class="required">City:</label>
<input type="text" name="city" id="city" value="" /></div>

<input class="submit" type="submit" name="submit" value="Submit" />
</form>

abdfahim · August 17, 2010

instead of echoing error message, set error flags (e.g. $nameerr, $emailerr etc.) in case error happens.

Then in the respective place, chk whether error flag is set and echo the error message

palle · August 17, 2010

A very simple approatch

<?php
if(isset($_POST['submit']){

  $f_name = mysql_real_escape_string($_POST['f_name']);

  $error = array();
  if(empty($f_name){
    $error['f_name'] = "error message here";
  } else if (){
    // some more checking
  } else {
    // Success...
  }
}
?>


<html>
...

<form>
  <input type="text" name="f_name" />
  <?php
    if(isset($error['f_name']){
      echo $error['f_name']
   }
  ?>
</form>

...
</html>

codeline · August 17, 2010

@abdbuet .. is that almost a similar process at palle's suggestion?

codeline · August 18, 2010

Can I get some help on this process:

instead of echoing error message, set error flags (e.g. $nameerr, $emailerr etc.) in case error happens.

Then in the respective place, chk whether error flag is set and echo the error message

palle · August 18, 2010

I have set up a complete example just copy, paste it and give it a try..

This is a very ease way of doing it but it can be somehow cumbersome if

you have alot of inputdata to validate.

Please notyfie me if you get it to work or dont work

<?php
// return error message in the form
function form_error($name){
        global $error;
        if(isset($error[$name])){
            $var = "
                <div class=\"error\">
                        <ul>$error[$name]</ul>
                </div>";
            return $var;
        }
    }

// Make sure that the value from the inputfield from the form are in an array
function clean_post($name){
    $clean_name = array();
    if(isset($_POST[$name])){
        $clean_name[$name] = $_POST[$name];
        return $clean_name[$name];
    }

}

// ascape dangerous characters in submitted data.
function clean_html($output){
    $output = ucfirst($output);
    $output = htmlentities($output,ENT_QUOTES, 'ISO-8859-1');
    return $output;
}

// When the form is submitted... then action is taken
if(isset($_POST['submit'])){
    $first_name = clean_post('first_name');
    $last_name = clean_post('last_name');


    //formvalidation begins
    $error = array();
    if(!strlen($first_name)){ // make sure that they have entered a firstname
        $error['first_name'] = "<li>You have to enter a firstname.</li>";
    } else if(!ctype_alpha($first_name)){ // make sure tha the firstname only consits of letters.
        $error['first_name'] = "<li>Your firstname can only consist letters.</li>";
    } else if(!strlen($last_name)){ // make sure that they have entered a lastname
        $error['last_name'] = "<li>You have to enter a lastnamn.</li>";
    } else if(!ctype_alpha($last_name)){ // make sure tha the lastname only consits of letters.
        $error['last_name'] = "<li>Your lastname can only consist letters.</li>";

        // You can add as many if else statment as you need before your output a message.
    } else {
        // print out a message on the screen.
        $output = "
                    Thank you " . clean_html($first_name) . " " . clean_html($last_name) . " for submiting the form
                ";
    }
}

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
    <head>
    <title>Login</title>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="sv" />
    
    <style type="text/css">
        html {
            font-size: 125%;
        }
        body {
            font: 50% new-roman, arial, sans-sarif;
        }
        p{
            font-size: 1.4em;
            padding: 1em;
        }
        *{margin: 0;padding:0}
        div#center{
            width: 40em;
            margin: 2em auto;
        }
        form#login{
            background: #f1f1f1;
            margin-top: 1em;
            -moz-border-radius: 1em;
            -moz-box-shadow: 3px 3px 3px #888;

        }
        form#login fieldset{
            padding: 1em;
            border: none;
        }
        form#login label{
            float: left;
            width: 10em;
            font-size: 1.2em;
            color: gray;
        }
        form#login input[type="submit"]{
            background: #ddd;
            border: none;
            color: #333;
            display: block;
            margin: 0 auto;
            width: 5em;
            padding: .4em;            
        }
        form#login div.containerInput{
            padding: 10px;
            margin: 10px;
        }
        form#login div.error{
            background: #BF4747;
            padding: 5px;
            margin: 10px
        }
        form#login div.error ul li{
            list-style-position: inside;
            color: #fff;
            font-size: 1.2em;
        }

    </style>
    
    </head>
    <body>
        <div id="center">
            <p><?php print($output);?></p>
            
            <form action="<?php echo $_SERVER['SCRIPT_NAM'];?>" method="post" id="login">
                <fieldset>
                    <div class="containerInput">
                        <label for="first_name">Firstname: </label>
                        <input id="first_name" type="text" name="first_name" value="<?php echo clean_html($first_name);?>" />
                    </div>
                    <?php echo form_error('first_name');?>

                    <div class="containerInput">
                        <label for="last_name">Lastname: </label>
                        <input id="last_name" type="text" name="last_name" value="<?php echo clean_html($last_name);?>" />
                    </div>
                    <?php echo form_error('last_name');?>

                    <input type="submit" name="submit" value="Submit"/>
                </fieldset>
            </form>
        </div>
        
    </body>
</html>

abdfahim · August 19, 2010

Hi codeline, what I said was just a simple coding similar to what palle suggests in his first post.

Sign In

Outputting Form Input Errors underneath fields

Recommended Posts

codeline

Link to comment

Share on other sites

abdfahim

Link to comment

Share on other sites

palle

Link to comment

Share on other sites

codeline

Link to comment

Share on other sites

codeline

Link to comment

Share on other sites

palle

Link to comment

Share on other sites

abdfahim

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information