Link Form Validations Error Message To Specific Form Instance When Generated In A Loop - PHP

Question

I have a series of forms on a page in relation to image uploads. I have some PHP validations that happen and I would like to have the error message outputted at the top of the individual form instance that fails the validation.

I've noticed other questions on here with this issue but they are instances where the name of a hidden form element is essentially hard-coded.

A user of the site in the code below can upload up to 10 images so there will be up to 10 instances of the form on the page which are outputted via a while loop.

In the following code I have a filename variable in the hidden input element (this filename is assigned when the image is initially uploaded via the Imagick PHP library). At the top of each form I have a foreach loop that echos out the failed validation message (in the code below I've only included one validation) and hence would like the error message to apply to the particular form instance which has the error.

Here is an example of some of the information submitted including a sample PHP validation:

<?php 
    if(isset($_POST['upload-submit'])) {
    
    $image_title = $_POST['image-title'];
    $image_tags = $_POST['image-tags'];
    $form_filename = $_POST['image-filename']; // hidden form element

    $image_title = filter_var($image_title, FILTER_SANITIZE_STRING);
    $image_tags = filter_var($image_tags, FILTER_SANITIZE_STRING);
    $form_filename = filter_var($form_filename, FILTER_SANITIZE_STRING);
    
    // example of form validation
    if(empty(trim($image_title))){
        $error[] = "Image Title cannot be blank";
    }

    if (!isset($error)) {

        try {

            $sql = "UPDATE imageposts SET
            image_title = :image_title,
            image_tags = :image_tags

            WHERE filename = :filename";
                
            $stmt = $connection->prepare($sql);
    
            $stmt->execute([
                ':image_title' => $image_title,
                ':image_tags' => $image_tags,
                ':filename' => $form_filename
            ]);
            
        } catch (PDOException $e) {
            echo "Error: " . $e->getMessage(); // this is for PDO errors not validation errors
        }

    } else {
        // give values an empty string to avoid an error being thrown before form submission if empty
        $image_title = $image_tags = "";
    }

}
?>

Simplified version of how the form instances are outputted on to the page:

<?php
    // $user_id is assigned via a $_SESSION when user logs in

    $stmt = $connection->prepare("SELECT * FROM imageposts WHERE user_id = :user_id");
    $stmt->execute([
        ':user_id' => $user_id
    ]); 

    while ($row = $stmt->fetch()) {
        $db_image_filename = escape($row['filename']); // outputted into the value attribute of the hidden input element
?>
          
<form method="post" enctype="multipart/form-data">
    <?php 
        // -- echo error messages at top of the form
        if(isset($error)) {
            foreach($error as $msg) {
                echo "<p>* ERROR: {$msg}</p>";
            }
        }
    ?>
    <div>
        <div class="form-row">
            <label for="upload-details-title">Image Title</label>
            <input id="upload-details-title" type="text" name="image-title">
        </div>
        <div class="form-row">
            <label for="upload-details-tags">Comma Separated Image Tags</label>
            <textarea id="upload-details-tags" type="text" name="image-tags"></textarea>
        </div>
        <div class="form-row">
            <button name="upload-submit">COMPLETE UPLOAD</button>
        </div>
        <div class="form-row">
            <!-- hidden form input -->
            <input type="hidden" name="image-filename" value="<?php echo $db_image_filename; ?>"> 
        </div>
    </div>
</form>

<?php } ?>

How do get it so the form instance with the error is the only one that shows the error message ?

Answer 1

You will need something that allows you to identify your form instances in the first place, and you need to submit it together with the rest of the fields, so that you have the info which form the submission came from, available at that point where you do your validation.

Since apparently the image filename itself can be used to identify the form it is in here, you don't need to create & send anything extra. Just check if $form_filename === $db_image_filename before you output the error messages inside the form inside within the while loop.

You can put both that and the check whether $errors is even set, into the same if:

<form method="post" enctype="multipart/form-data">
    <?php 
        // -- echo error messages at top of the form
        if($form_filename === $db_image_filename && isset($error)) {
            foreach($error as $msg) {
                echo "<p>* ERROR: {$msg}</p>";
            }
        }
    ?>