如何为空字段添加红色边框并阻止表单提交？代码失效求助

核心问题分析 #

你的表单验证逻辑存在三个关键错误，导致无法阻止空email时的页面刷新：

• 条件判断逻辑错误：$("#email").val() != null无法识别空字符串——用户未输入时，val()返回空字符串""而非null，这个条件永远为真，会直接触发表单提交。
• 未正确传递事件对象：event.preventDefault()中的event未在事件处理函数中声明，会导致报错，阻止提交的代码无法执行。
• 递归触发提交事件：手动调用$("#forma").submit()会再次触发submit事件，陷入无限循环，最终仍会提交表单。

修复后的JavaScript代码 #

function promeniFormu() {
    $("#forma").on("submit", function(event) { // 声明event参数
        const emailVal = $.trim($("#email").val()); // 去除首尾空格，避免空白字符绕过验证
        if (emailVal === "") { // 判断是否为空字符串
            event.preventDefault(); // 阻止表单提交
            $("#email").css("border", "2px solid red");
        } else {
            $("#email").css("border", ""); // 验证通过时恢复默认边框
        }
    });

    // 额外优化：用户输入时自动恢复边框样式
    $("#email").on("input", function() {
        $(this).css("border", "");
    });
}
promeniFormu();

额外优化建议 #

1. 同时验证密码字段：既然密码也是必填项，建议补充密码的空值验证，保持逻辑一致：

function promeniFormu() {
    $("#forma").on("submit", function(event) {
        const emailVal = $.trim($("#email").val());
        const passVal = $.trim($("#lozinka").val());
        
        let hasError = false;
        if (emailVal === "") {
            $("#email").css("border", "2px solid red");
            hasError = true;
        } else {
            $("#email").css("border", "");
        }
        
        if (passVal === "") {
            $("#lozinka").css("border", "2px solid red");
            hasError = true;
        } else {
            $("#lozinka").css("border", "");
        }
        
        if (hasError) {
            event.preventDefault();
        }
    });

    // 输入时恢复对应字段边框
    $("#email, #lozinka").on("input", function() {
        $(this).css("border", "");
    });
}
promeniFormu();

2. 优化后端错误提示显示：页面中的#nepoklapajuse默认处于显示状态，建议在CSS中设置display: none;，只有当PHP验证失败（$greska=1）时再通过PHP控制显示：

<div id="nepoklapajuse" <?php if(isset($greska) && $greska != 1) echo 'style="display:none;"'; ?>>
    <h4 class="crvena">Email adresa i lozinka se ne poklapaju - pokušaj opet</h4>
</div>

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