在循环的每个实例上都输出整个表单的错误消息 - PHP

Question

我有一个输出图像和一些 HTML <input>元素的表单，用于向图像添加标题和标签。 这是使用<form>元素内的while循环输出到页面上的。 表单的提交按钮在循环之外，因此您可以提交多张图像 go。

当出现错误时，我想 output 其相关上传组件内的图像组件的特定实例的错误消息 - 即带有 class upload-component的 div 。 是否可以使用 PHP 或者如果发现错误（例如，一个空的标题输入元素），最好只阻止使用 PHP 进行表单处理，然后使用 Z686155AF75A60A0F6E9D80C1F7EDD3 显示特定错误弄清楚如何处理 JS）？

目前，当发现错误时，PHP 会为每个组件中的整个表单输出每个错误 - 即，如果仅一个组件有 3 个错误，则循环中每个组件的顶部会出现 3 个错误消息。 这显然是由于使用foreach循环对 output 错误造成的。 当我删除 foreach 虽然它没有 output 任何东西，因为它无法处理潜在错误的数组？

注意： $user_id 变量是在用户登录时通过 $_SESSION 分配的。

非常感谢您的帮助。

<?php 

if(isset($_POST['upload-submit'])) {
    
    $image_title = $_POST['image-title'];
    $image_tags = $_POST['image-tags'];
    $image_id = $_POST['image-id']; // value attribute from hidden form element

    // check for errors - empty title input element not allowed
    forEach($image_title as $title) {
        if(empty(trim($title))){
            $error[] = "Image Title must be between 10 and 150 characters long";
        }
    }

    if (!isset($error)) {

        // ---- UPDATE DATABASE WITH PDO STATEMENTS IF NO ERRORS

    } 
}
?>

<form method="post" enctype="multipart/form-data">

    <!-- IMAGE COMPONENT - START -->

        <?php

        $stmt = $connection->prepare("SELECT * FROM lj_imageposts WHERE user_id = :user_id");

        $stmt->execute([
            ':user_id' => $user_id
        ]); 

        while ($row = $stmt->fetch()) {
            $db_image_id = htmlspecialchars($row['image_id']);
            $db_image_title = htmlspecialchars($row['image_title']);
            $db_image_tags = htmlspecialchars($row['image_tags']);
        ?>

    <div class="upload-component">                
        <?php 
            // echo error messages from above
            if(isset($error)) {
                foreach($error as $msg) {
                    echo "<p>** ERROR: {$msg}</p>";
                }
            }
        ?>
            <div class="upload-image-wrapper">
                <img class="img upload-details-img" src="project/img/image.jpg">
            </div>
            <div class="edit-zone">
                <div class="form-row">
                    <label for="title-id-<?php echo $db_image_id; ?>">Image Title</label>
                    <input id="title-id-<?php echo $db_image_id; ?>" value="<?php $db_image_title; ?>" type="text" name="image-title[]">
                </div>
                <div class="form-row">
                    <label for="tags-id-<?php echo $db_image_id; ?>">Comma Separated Image Tags</label>
                    <textarea id="tags-id-<?php echo $db_image_id; ?>" type="text" name="image-tags[]"></textarea>
                    <input type="hidden" name="image-id[]" value="<?php echo $db_image_id; ?>">
                </div>
            </div>
    </div>

    <?php } ?>

    <div class="form-row">
        <button type="submit" name="upload-submit">COMPLETE UPLOAD</button>
    </div>
</form>

Answer 1

要将特定错误与特定记录/ upload-component div 相关联，应为错误分配一个已知键，最明显的是image-id 。 表单中的所有字段都对名称使用array语法，因此您可以使用此索引关联 POST 数组中的各个字段。 稍后，当您希望在适当的upload-component容器中显示相关错误消息时，您查看数组键（即image-id ）并与来自 sql 查询的image-id进行比较 - 如果它们匹配，则显示错误。

<?php
    $error=array();

    if( isset( 
        $_POST['upload-submit'],
        $_POST['image-title'],
        $_POST['image-id']
    )) {
        $image_title = $_POST['image-title'];
        $image_tags = $_POST['image-tags'];
        $image_id = $_POST['image-id'];
        
        /*
            As the form has elements employing the the array syntax in
            their names (ie: <input type="text" name="image-id[]" /> etc )
            then the index within the POST array can be used to identify the relevant image-id
            and thus assign to the $error array as a key. This later helps identify which error
            is related to which generated 
            
        */
        forEach( $image_title as $index => $title ) {
            $id=$_POST['image-id'][ $index ];
            /*
                Assign the ID as key to the error in this array
            */
            if( empty( trim( $title ) ) ){
                $error[ $id ] = "Image Title must be between 10 and 150 characters long";
            }
        }

        if( empty( $error ) ) {
            // ---- UPDATE DATABASE WITH PDO STATEMENTS IF NO ERRORS
        }
    }
?>

<form method="post" enctype="multipart/form-data">

    <!-- IMAGE COMPONENT - START -->
    <?php

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

        while( $row = $stmt->fetch( PDO::FETCH_OBJ ) ) {
        
            $id = htmlspecialchars( $row->image_id );
            $title = htmlspecialchars( $row->image_title );
            $tags = htmlspecialchars( $row->image_tags );
            
            
            
            /* loop continues... */
    ?>

    <div class="upload-component">                
        <?php
        
            if( !empty( $error ) ) {
                foreach( $error as $element_id => $msg ) {
                    if( $element_id == $id ) echo "<p>** ERROR: {$msg}</p>";
                }
            }
        ?>
            <div class="upload-image-wrapper">
                <img class="img upload-details-img" src="project/img/image.jpg" />
            </div>
            
            <div class="edit-zone">
            
                <div class="form-row">
                    <label for="title-id-<?php echo $id; ?>">Image Title</label>
                    <input id="title-id-<?php echo $id; ?>" value="<?php $title; ?>" type="text" name="image-title[]" />
                </div>
                
                <div class="form-row">
                    <label for="tags-id-<?php echo $id; ?>">Comma Separated Image Tags</label>
                    <textarea id="tags-id-<?php echo $id; ?>" type="text" name="image-tags[]"></textarea>
                    
                    <input type="hidden" name="image-id[]" value="<?php echo $id; ?>" />
                </div>
            </div>
    </div>

    <?php 
    } //close while loop
    ?>

    <div class="form-row">
        <button type="submit" name="upload-submit">COMPLETE UPLOAD</button>
    </div>
</form>