PHP表单验证失效：验证不通过仍执行POST跳转问题排查

核心问题分析 #

• 文件输入框ID不匹配：HTML中文件输入框ID为captureDocument，但JS验证函数里用document.getElementById("user_img")获取元素，导致文件验证逻辑完全失效。
• 缺少EL Number验证：当前仅验证文件，未对必填的EL Number做非空、长度校验。
• 错误提示元素缺失：JS中尝试向file_error元素写入错误信息，但HTML里无此元素，会触发控制台错误导致验证逻辑中断。
• 重复ID问题：EL Number输入框同时设置dsrELNumber和elNumber两个ID，违反DOM唯一ID规则，可能引发选择器异常。

修复步骤 #

1. 统一文件输入框ID：将HTML中文件输入框ID改为user_img，与JS中的选择器保持一致。
2. 添加EL Number验证逻辑：在validate函数中检查EL Number是否为空、长度是否符合10位要求。
3. 新增错误提示容器：在HTML中添加file_error元素，用于展示验证错误信息。
4. 移除重复ID：删除EL Number输入框的重复IDelNumber。
5. 优化函数返回逻辑：移除冗余的末尾return valid;，确保验证通过返回true，失败返回false。

修改后的完整代码 #

<div class="row">
    <div class="col-12 col-md-12 col-sm-6">
        <!-- Attendacne Card Info Fields-->
        <div class="card">
            <div class="card-body">
                <!--<h4 class="card-title mb-5">DSR Information Fields</h4>-->
                <form action="./collect-dsrs-attendance-confirmation.php" method="POST" name="page331" enctype="multipart/form-data" onsubmit="return validate();">
                    <div class="form-body">
                        <div class="row">
                            <input type="text" class="form-control"  id="lat" name="latitude" style="display:none;" value="">
                            <input type="text" class="form-control"  id="long" name="longitude" style="display:none;" value="">
                            <!--Back Button For Each Page-->
                            <div class="col-md-12 mb-5 d-grid gap-2 d-md-flex justify-content-md-end">
                                <div class="form-actions text-start mt-3">
                                    <a type="button" href="./index.php" class="btn btn-danger ps-4 pe-4"
                                    id="backhome" style="background-color: rgb(255, 0, 0);">Back Home</a>
                                </div>
                            </div>   

                            <div class="col-lg-12 col-md-12">
                                <div class="form-group mb-3">
                                        <label class="form-label text-dark" for="dsrELNumber">ইএল নম্বর</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1">+880</span>
                                            </div>
                                            <input class="form-control" id="dsrELNumber" type="text" name="el_number" 
                                            placeholder="Enter EL Number"  data-maxlength="10" data-minlength="10"
                                            oninput="this.value=this.value.slice(0,this.dataset.maxlength)"
                                            value="<?php if(!empty($_POST['dsr_el_number'])) echo $_POST['el_number']; ?>" required>
                                        </div>
                                        <div id="docImage">
                                            <!--<video id="video" width="640" height="480" autoplay style="display:none;"></video>-->
                                            <label class="custom-file-label text-primary mt-3" for="file-input">Take Selfie</label>
                                            <input type="file" class="mt-4 form-control" id="user_img" name="user_img" accept="image/*" capture="camera" required>
                                            <button class="btn text-white mt-4 mb-4 d-block ps-4 pe-4" type="submit" style="background-color: rgb(255, 0, 0);" id="btnTakeDocument">Submit</button>
                                        </div>
                                
                                     <!--错误提示容器-->
                                     <div id="file_error" class="text-danger mt-2"></div>
                                     <!--To show successfull message-->
                                     <div id="message"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- Attendacne Card Info Fields-->
    </div>
</div>
<script>
    function validate()
    {
        var valid = true;
        var file_name = "";
        var file_type = "";
        var file_size = "";
        var error_msg = "";
        var valid_size = 3*1000*1000;
        var display_error = document.getElementById('file_error');
        var file = document.getElementById("user_img");
        var elNumber = document.getElementById("dsrELNumber").value.trim();

        // 验证EL Number
        if(elNumber === ""){
            valid = false;
            error_msg += "\n* 请填写EL编号";
        } else if(elNumber.length !== 10){
            valid = false;
            error_msg += "\n* EL编号必须为10位";
        }

        // 验证文件
        if(file.files.length != 0)
        {
            file_name = file.files[0].name;
            file_size = file.files[0].size;
            file_type = file.files[0].type;
             
            if(file_type!=="image/png" && file_type!=="image/jpeg" && file_type!=="image/gif")
            {
                valid = false;
                error_msg += "\n* 仅支持PNG、JPG/JPEG和GIF格式的图片";
            }
     
            if(file_size > valid_size)
            {
                valid = false;
                error_msg += "\n* 文件大小不能超过3MB";
            }
     
        }
        else
        {
            valid = false;
            error_msg += "\n* 请选择图片文件";
        }
     
        if(valid)
        {
            alert("文件验证通过，即将提交");
            return true;
        }
        else
        {
            // 将换行符转为HTML换行
            display_error.innerHTML = error_msg.replace(/\n/g, "<br>");
            return false;
        }
    }
</script>

内容的提问来源于stack exchange，提问作者Dip Chakraborty