表单提交时输入框为空需阻止跳转并停留当前div的问题求助

我太懂你折腾两天的苦恼了，你的问题核心出在两个地方：选择器逻辑错误和未阻止按钮的默认跳转行为，咱们一步步来修复：

问题拆解 #

1. 错误的选择器：你写的$('input#a1#x1')是在寻找同时拥有a1和x1两个ID的输入框，这显然不符合你的页面结构（每个输入框是独立的）。虽然你说能弹出警告，但大概率是浏览器容错性导致的意外触发，这个选择器本身逻辑是错误的。
2. 未拦截默认行为：即使弹出了警告，按钮点击后的跳转/提交逻辑还是会正常执行，所以必须显式阻止这个行为，才能让用户停留在当前div。

修正后的代码 #

jQuery 部分 #

$(document).ready(function(){
    $('#b1').click(function(event){
        // 获取两个输入框的值，用trim去除首尾空格，避免空字符绕过验证
        const addressVal = $.trim($('#a1').val());
        const amountVal = $.trim($('#x1').val());

        // 检查任一输入框为空的情况
        if (addressVal === "" || amountVal === "") {
            alert('Please complete all required fields');
            // 阻止按钮点击后的默认跳转/提交行为
            event.preventDefault();
            // 如果存在事件冒泡问题，也可以用 return false; 它同时阻止默认行为和冒泡
        }
    });
});

额外优化建议 #

• 如果这个按钮属于<form>标签内的提交按钮，建议给表单绑定submit事件而非按钮的click事件，这样能覆盖回车提交等更多触发场景。
• 可以把验证逻辑封装成独立函数，后续新增输入框时只需扩展函数即可，更易维护。

这样修改后，当输入框为空时，既会弹出警告提示，页面也会停留在当前div，不会发生跳转了。

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