Display errors next to input fields

Question

I know there is a whole lot of questions regarding this very same issue, but I'm so stuck with it. I have a hard time getting what's wrong. I have tried many things from Google, with no luck. I am trying to have the validation errors showing next to their relevant input fields instead of just being displayed at the form top. The form is quite big so I'll just post a "sample" of it.

HTML form:

<form action="register.php" method="POST">
    <table>
        <th class="topLine">
            <label for="form_login" >Login
        </th>

        <td>
            <div class="form_input_bg">
                <input type="text" name="username" value="" maxlength="16" size="16"/>
                <?php echo $username;?>
            </div>
        </td>
    </tr>


    <tr>
        <th class="topLine">Password
            <p style="font-size:9px;">8-16 Character (only a-Z,0-9)</p>
        </th>
        <td>
            <div class="form_input_bg">
                <input type="password" name="pass" value="" maxlength="16" size="16"/>
            </div>
        </td>
    </tr>
    <tr>

and the PHP validation, it happens to be like this, still a sample of it (don't wanna hurt your eyes).

<?PHP
    elseif(strlen($_POST['username']) < 5)
    {
        echo '<div class="message">Username must be longer than 4 characters
              </div></div><p>
?>

Would You care to fix the code sample which would actually work and show Your basic idea of how things should work? — Kamiccolo
– Kamiccolo, Commented Mar 18, 2014 at 13:47
The answers provided are all working good especially Andrey's one. But I have a concern, the errors don't get displayed at a time, I mean if the username and e-mail have invalid inputs, it first shows the username, after its validated by the user, the other error which is for Email gets displayed.. how can I display them for users at time? — user3413809
– user3413809, Commented Mar 18, 2014 at 15:20

Andrii Mishchenko · Accepted Answer · 2014-03-18 13:46:31Z

1

I would suggest you to separate your validation from displaying html like this:

// validation
$error = array();
if (strlen($username) < 5)
    $error['username'] = 'Login must be longer than 4 characters';


// html
<input type="text" name="username" value="" maxlength="16" size="16"/><?php echo $username;?>
<?php if (isset($error['username'])) : ?>
    <p class="error"><?php echo $error['username'] ?></p>
<?php endif ?>

answered Mar 18, 2014 at 13:46

Andrii Mishchenko

2,69424 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sean Over a year ago

@user3413809 Why won't this allow you to use <div class="message">? They used <p class="error">, but you just need to change it to <div class="message">, or even add it to the variable -> $error['username'] = '<div class="message">Login must be longer than 4 characters</div>

user3413809 Over a year ago

I'm trying it now. I'll get back to you in a few moments. Thanks a lot though :)

user3413809 Over a year ago

using my error style which is <div class="message">, and div class in general, makes the error display below the input form.. any solution??

Andrii Mishchenko Over a year ago

Put error message to another table column, so it will appear to the right of the input.

user3413809 Over a year ago

The answers provided are all working good especially Andrey's one. But I have a concern, the errors don't get displayed at time, I mean if the username and e-mail have invalid inputs, it first shows the username, after its validated by the user, the other error which is for Email gets displayed.. how can I display them for users at time?

David · Accepted Answer · 2014-03-18 13:46:42Z

0

How do these two segments of code relate to one another? Like this?:

<?php
    // other code
    elseif(strlen($_POST['username'])<5) {
        echo '<div class="message">Login must be longer than 4 characters</div></div><p>
    // other code
?>
<!-- other markup -->
<form>
    <table>
        <!-- form elements -->
    </table>
</form>

If that's the case then your code is explicitly echoing the validation messages "at the top" because it's emitting them to the output before it emits anything else. You'd need to move those to where they belong in the markup, something like this:

<!-- other markup -->
<form>
    <table>
        <tr>
            <td>
            <?php
                if(strlen($_POST['username'])<5) {
                    echo '<div class="message">Login must be longer than 4 characters</div>';
                }
            ?>
            <!-- login form element -->
            </td>
        </tr>
        <!-- repeat for other form elements -->
    </table>
</form>

The whole code file, top to bottom, is processed in sequential order. To place an element somewhere in the middle of the markup that code would need to echo it at that point in the markup.

answered Mar 18, 2014 at 13:46

David

221k42 gold badges245 silver badges337 bronze badges

2 Comments

user3413809 Over a year ago

You didn't get me right there. I wanted to say that I want them errors to be displayed next to the corresponding field of the error

David Over a year ago

@user3413809: In what way does my example not do that? For each field, echo the validation error next to that field.

user3351733 · Accepted Answer · 2014-03-18 13:59:10Z

0

Maybe you could try somhing like this.

<dl>
   <dt>Login:</dt>
   <dd><input type="text" name="username" value="" maxlength="16" size="16"/>
   <?php echo ($message['username'] == "" ? "" : $message['username']) ?></dd>
   <dt>Password:</dt>
   <dd><input type="text" name="password" value="" maxlength="16" size="16"/>
   <?php echo ($message['username'] == "" ? "" : $message['username']) ?></dd>
</dl>

You shouldn't use tabels for layout reason. (table to definitionlist)

For the other part generat an

<?PHP
$message = array();
...
elseif(strlen($_POST['username'])<=5) {
$message['username']'<div class="message">Login must be longer than 4 characters</div>    
?>

Hope this helps!

answered Mar 18, 2014 at 13:59

user3351733

463 bronze badges

Comments

Siddharth Hubli · Accepted Answer · 2014-03-18 16:34:28Z

try this

<!DOCTYPE HTML> 
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body> 
<?php
$nameErr = $emailErr = "";
$name = $email = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{

if (strlen($_POST["name"])<5)
{$nameErr = "Username must be longer than 4 characters";}
else
 {$name = $_POST["name"];}
if (empty($_POST["email"]))
 {$emailErr = "Email is required";}
else
 {$email = $_POST["email"];}
}
?>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo($_SERVER["PHP_SELF"]);?>"> 
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit"> 
</form>
</body>
</html>

Collectives™ on Stack Overflow

Display errors next to input fields

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related