PHP Form Validation

[lbh2011]

Hi,

 

I currently have the following code in my form processing script:

 

    $string_exp = "/^[A-Za-z .'-]+$/";
$error_missing = 'This field is required';
  	
    if(!preg_match($string_exp,$Name)) {
    $errors[] = $error_missing;
  	}
    
  	if(!preg_match($string_exp_number,$Phone)) {
    $errors[] = $error_missing;
  	}
    
    if(is_array($errors))
{
	echo 'Your message could not be sent due to the following errors:';
	while (list($key,$value) = each($errors))
	{

		echo '<span class="error">'.$value.'</span><br />';
	}

 

If the user enters no data into the required fields, the script prevents the form from being submitted and displays an error.

 

At present the errors for all the required fields are displayed in a long list at the top of my HTML form e.g.

 

This field is required

This field is required

 

What I want to do, is place the error message under each required field e.g. this http://coreyworrell.com/assets/uploads/images/ajax_contact_form.png instead of this http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/validation-ajax-css-form.jpg

 

What do I need to do?

 

My form looks similar to this at the moment:

 

<div id="log">
<div id="log_res">
</div>
</div>
<form id="contact" name="contact" method="post" action="process.php">
  <label>Name</label>
    <input type="text" name="Name" id="Name" tabindex="1" />
  
  <label>Email</label>
    <input type="text" name="Phone" id="Phone" tabindex="2" />
</form>

 

The error messages are placed in the <div> section at the top of the form (using ajax)

[joel24]

assign the respective error message to the array with the index of the form element if you only have two form fields...

    if(!preg_match($string_exp,$Name)) {
    $errors['name'] = $error_missing;
  	}
    
  	if(!preg_match($string_exp_number,$Phone)) {
    $errors['phone'] = $error_missing;
  	}


//then in form
<div id="log">
<div id="log_res">
</div>
</div>
<form id="contact" name="contact" method="post" action="process.php">
  <label>Name</label>
    <input type="text" name="Name" id="Name" tabindex="1" />
<?php echo (isset($errors['name']))?$errors['name']:''; ?>
  
  <label>Email</label>
    <input type="text" name="Phone" id="Phone" tabindex="2" />
<?php echo (isset($errors['phone']))?$errors['phone']:''; ?>
</form>

 

If you have more form elements, I would assign the elements to the array and then do a foreach to echo the elements, echoing the error if it is set.

[lbh2011]

Thanks for the reply. There are about 10 elements so the foreach approach seems the best option. How would I go about doing that?

[lbh2011]

Any ideas?

[scootstah]

Something like

$required = array(
'firstname' => 'You must enter a first name',
'lastname'  => 'You must enter a last name',
'username'  => 'You must enter a username',
'password'   => 'You must enter a password'
);

$errors = array();

foreach($required as $field => $error)
{
if (empty($_POST[$field])) {
	$errors[$field] = $error
}
}

[lbh2011]

My code currently looks something like this:

 

if(!isset($_POST['Name']) ||
!isset($_POST['Email']) ||) {

died('Your message could not be sent');
    }

$Name = $_POST['Name'];
$Email = $_POST['Email'];

$string_exp = "/^[A-Za-z .'-]+$/";
$string_exp_number = "/^[0-9]+$/";

if(!preg_match($string_exp,$Name)) {
$errors[] = 'Name';
} 

if(!preg_match($email_exp,$Email)) {
$errors[] = 'Email';
}

if(is_array($errors))
{
echo 'Your message could not be sent due to the following errors:';
while (list($key,$value) = each($errors))
{
echo '<span class="error">'.$value.'</span><br />';
}
}

//Continues with email function

 

How would I integrate your suggestions to a) ensure the field is not empty and b) return an error message which can be displayed under the form field. I believe I already have an array for listing the errors, but what would I need to change or add to my form client side in order to display the error message.

 

At present, my form look something like this:

 

The Javascript (which currently displays the list of error messages in the <div id="log_res"> section of the form:

 

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
		/* <![CDATA[ */
window.addEvent('domready', function(){
                $('contact').addEvent('submit', function(e) {
                    new Event(e).stop();
                    var log = $('log_res').empty().addClass('ajax-loading');
                    this.send({
                        update: log,
                        onComplete: function() {
                            log.removeClass('ajax-loading');
                        }
                    });
                });
            });
			/* ]]> */
</script>

   

The HTML of the form:

   

   

<div id="log">
<div id="log_res"> (The error messages are currently displayed here)
</div>
</div>
<form id="contact" name="contact" method="post" action="process.php">
  <label>Name</label>
    <input type="text" name="Name" id="Name" tabindex="1" />
  <label>Email</label>
    <input type="text" name="Email" id="Email" tabindex="2" />
    <input name="Submit" type="submit" value="Send Message" />
</form>

 

Thanks