如何检查Bootstrap tab-content中指定div的必填表单字段是否填写

我来帮你调整代码，实现只检查指定basic_info div内的必填字段，并且验证不通过时停留在当前标签页。

问题分析 #

你之前的代码里$('.required')会选中整个页面所有带required类的元素，这就是为什么会检查全部必填项的原因。我们需要把选择器的范围限定在basic_info这个div内部，同时还要阻止标签切换的默认行为，这样验证失败时就不会跳转到下一个标签了。

修改后的完整代码 #

$('#li_2').click(function(event) {
  $('#submit_section').hide();
  
  // 仅定位到basic_info div内的必填字段
  const requiredFields = $('#basic_info .required');
  const totalRequired = requiredFields.length;
  // 过滤出已填写的字段（去掉空格，避免空字符被误判）
  const filledFields = requiredFields.filter(function() {
    return this.value.trim() !== '';
  });

  if (filledFields.length !== totalRequired) {
    alert('Please fill out all required fields in the Basic Info section.');
    // 阻止标签切换的默认动作，停留在当前标签
    event.preventDefault();
    // 双重保险：强制切回第一个标签（如果默认阻止失效的话）
    $('#li_1 a').tab('show');
  }
});

关键优化点 #

• 限定选择范围：用$('#basic_info .required')替代全局的.required，精准定位目标div内的必填字段。
• 阻止默认行为：调用event.preventDefault()，取消Bootstrap标签切换的默认逻辑，确保验证失败时不会跳页。
• 严谨的空值判断：加上trim()，避免用户只输入空格就被判定为已填写，提升验证准确性。
• 双重保险：额外调用$('#li_1 a').tab('show')，防止某些情况下默认阻止失效，确保停留在第一个标签页。

额外提示 #

如果你的Bootstrap标签是通过data-bs-toggle或data-toggle实现的，确保这段代码在DOM加载完成后执行（比如放在$(document).ready()里），避免元素还未渲染就绑定事件。

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