Displaying input error messages next to the input field-CodePudding

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 >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; 
    }
}
}
?>

CodePudding user response：

You can add the 'required' attribute to <input> elements, which get validated on form submission. E.g. <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

CodePudding user response：

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>"; ?>