Display form validation errors next to each field

forms, php, validation

Solution

You need to change the whole code for this!!! The structure, perhaps this way:

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
    <ul>
        <li>
            <label>
                <span>Name</span>
                <input type="text" name="name" />
                <small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <label>
                <span>Email</span>
                <input type="text" name="email" />
                <small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <label>
                <span>Subject</span>
                <input type="text" name="subject" />
                <small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <label>
                <span>Message</span>
                <textarea name="message" cols="80" rows="7"></textarea>
                <small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
            </label>
        </li>
        <li>
            <input type="submit" name="submit" value="Send" />
        </li>
    </ul>
</form>

And the CSS for the same:

* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}

You can see a live demo here: Demo

Error Handling in PHP

Keep an error variable for each field. Say,

<?php
    $error = array(
        "name" => "",
        "email" => "",
        "subject" => "",
        "message" => ""
    );
?>

Update them with the errors and display them below.

<?php
    if (empty()$_POST["email"])
        $error["email"] = "Email is required!";
    elseif (!isEmail($_POST["email"]))
        $error["email"] = "Not a Valid Email!";
?>

If there are no errors, it would be empty and the user doesn't see the error message. In your Forms Code, you need to just update this way:

<small class="errorText"><?php echo $error["name"]; ?></small>
<small class="errorText"><?php echo $error["email"]; ?></small>

where in the backend, the `$error["email"]` would have either `"This field is required"` or `"Not a valid email address!"`.

Problem

I am working on a simple contact form written in php and have almost everything setup as I would like for it to be except right now, all validation errors are displaying in a div on the top of my form, and I would like to change the code below so they are displayed next to the form field that caused the error, but I am not sure how to accomplish this so I have come to the experts for some advise. PHP Validation Routine ``` $frm_valid = new Validate(); if(isset($_POST['submit'])){ $rules=array( array('Type'=>'Required','Var'=>$_POST['name'],'Msg'=>'Name field is required.'), array('Type'=>'Required','Var'=>$_POST['email'],'Msg'=>'Email address field is required.'), array('Type'=>'Email','Var'=>$_POST['email'],'Msg'=>'Your email address format is invalid.'), array('Type'=>'Required','Var'=>$_POST['subject'],'Msg'=>'Subject field is required.'), array('Type'=>'Required','Var'=>$_POST['message'],'Msg'=>'Message field is required.'), ); $result = $frm_valid->Valid($rules); if(is_array($result)){ // Print validation errors (if any) echo('<div"><b>The form cannot be submitted until the following errors are corrected.</b><ul>'); foreach($result as $key=>$val){ echo '<li>'.$val.'</li>'; } echo('</ul></div><br />'); } else { // Do something else. } } ``` Forms HTML ``` <form action="<? echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"> <input type="text" name="name" value="" /> <br /> <input type="text" name="email" value="" /> <br /> <input type="text" name="subject" value="" /> <br /> <textarea name="message" cols="80" rows="7"></textarea> <br /> <input type="submit" name="submit" value="Send" /> </form> ```

Original source