简体   繁体   中英

Displaying input error messages next to the input field

I would like to display error checking next to the input field. Currently, errors are displayed at the top of the page.

Maybe there is some way to check for input errors? I could not find a similar example where html and php code are separated into different files Or my code is completely wrong.

index.php

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>testpage</title> </head> <body> <?php require('process.php'); ?> <h1>Form</h1> <form method="post" action=""> <div> Date: <input type="date" name="date"/><br /> </div> <div> <label>Start:</label> <select name="starttime" style="margin-right:15px" > <option value="09:00:00">09:00</option> <option value="17:00:00">17:00</option> </select> <label>End:</label> <select name="endtime"> <option value="18:00:00">18:00</option> </select> <br> </div> <div> Name: <input type="text" name="user_name" placeholder="Name" /><br /> </div> Mail: <input type="email" name="user_email" placeholder="Mail" /><br /> Message: <textarea name="user_text"></textarea><br /> <input type="submit" value="Send" /> </form> <h3 class=" txt_center">DB Output <span id="curdate"> <?php require('calendar.php'); ?> <.-- <script type="text/javascript" src="js/time-select.js"></script> --> </body> </html>

process.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $u_date = filter_var($_POST["date"]);
    $u_starttime = $_POST["starttime"];
    $u_endtime = $_POST["endtime"];
    $u_name = filter_var($_POST["user_name"]); 
    $u_email = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
    $u_text = filter_var($_POST["user_text"]);

    $error = array();
    if (empty($u_date)){
        $error['date'] = 'Date is empty!';
        }
    elseif ( $u_starttime > $u_endtime ){
        echo "*Incorrect time";
    }        
    elseif (empty($u_name)){
        echo "Name is empty.";
    }
    else{
    require_once('db-connect.php');
    
    $statement = $mysqli->prepare("INSERT INTO users_data (date, start_time, end_time, user_name, user_email, user_message) VALUES(?, ?, ?, ?, ?, ?)"); 
    
    $statement->bind_param('ssssss', $u_date, $u_starttime, $u_endtime,  $u_name, $u_email, $u_text); 
    
    if($statement->execute()){
    print "Hello, " . $u_name . "!, request is complete!";
    }else{
    print $mysqli->error; 
    }
}
}
?>

You can add the 'required' attribute to <input> elements, which get validated on form submission. Eg <input type="date" name="date" required/> eliminating the necessity to write code for error output.

EDIT: here you can see how the warning is shown

Also, the validation

elseif ( $u_starttime > $u_endtime ){
    echo "*Incorrect time";
}        

is not required, since the user's choices already force starttime < endtime.

Cheers

Here is an example for setting date validation next to your date input fields. in process.php:

 `   $errordate="";
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
     $u_date = filter_var($_POST["date"]);
if (empty($u_date)){
    $errordate= 'Date is empty!';
    }}

and in your index.php: <input type="date" name="date"/> * <?php echo "<p style='color:red;'>".$errordate. "</p>"; ?> <input type="date" name="date"/> * <?php echo "<p style='color:red;'>".$errordate. "</p>"; ?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM