HTML 表单下一个和提交按钮忽略必填字段

Question

我有一个包含必填字段的多页表单，当我单击“下一步”或“提交”按钮时，这些字段将被忽略。

我希望它能够阻止进入下一页，除非所有必需的输入都已填写。

如果您需要更多详细信息，请随时询问。

谢谢

这是我的多页面和按钮行为的 Javascript 代码：

let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');

form.onsubmit = () => {
    return false
}
let current_step = 0;
let stepCount = 3;
step[current_step].classList.add('d-block');
if (current_step == 0) {
    prevBtn.classList.add('d-none');
    submitBtn.classList.add('d-none');
    nextBtn.classList.add('d-inline-block');
}
const progress = (value) => {
    document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;
}

nextBtn.addEventListener('click', () => {
    current_step++;
    let previous_step = current_step - 1;
    if ((current_step > 0) && (current_step <= stepCount)) {
        prevBtn.classList.remove('d-none');
        prevBtn.classList.add('d-inline-block');
        step[current_step].classList.remove('d-none');
        step[current_step].classList.add('d-block');
        step[previous_step].classList.remove('d-block');
        step[previous_step].classList.add('d-none');
        if (current_step == stepCount) {
            submitBtn.classList.remove('d-none');
            submitBtn.classList.add('d-inline-block');
            nextBtn.classList.remove('d-inline-block');
            nextBtn.classList.add('d-none');
        }
    } else {
        if (current_step > stepCount) {
            form.onsubmit = () => {
                return true
            }
        }
    }
    progress((100 / stepCount) * current_step);
});
 
 
prevBtn.addEventListener('click', () => {
    if (current_step > 0) {
        current_step--;
        let previous_step = current_step + 1;
        prevBtn.classList.add('d-none');
        prevBtn.classList.add('d-inline-block');
        step[current_step].classList.remove('d-none');
        step[current_step].classList.add('d-block')
        step[previous_step].classList.remove('d-block');
        step[previous_step].classList.add('d-none');
        if (current_step < stepCount) {
            submitBtn.classList.remove('d-inline-block');
            submitBtn.classList.add('d-none');
            nextBtn.classList.remove('d-none');
            nextBtn.classList.add('d-inline-block');
            prevBtn.classList.remove('d-none');
            prevBtn.classList.add('d-inline-block');
        }
    }
 
    if (current_step == 0) {
        prevBtn.classList.remove('d-inline-block');
        prevBtn.classList.add('d-none');
    }
    progress((100 / stepCount) * current_step);
});
 
 
submitBtn.addEventListener('click', () => {
    preloader.classList.add('d-block');
 
    const timer = ms => new Promise(res => setTimeout(res, ms));
 
    timer(3000)
        .then(() => {
            bodyElement.classList.add('loaded');
        }).then(() => {
            step[stepCount].classList.remove('d-block');
            step[stepCount].classList.add('d-none');
            prevBtn.classList.remove('d-inline-block');
            prevBtn.classList.add('d-none');
            submitBtn.classList.remove('d-inline-block');
            submitBtn.classList.add('d-none');
            succcessDiv.classList.remove('d-none');
            succcessDiv.classList.add('d-block');
        })
 
});

以下是按钮的 HTML 代码：

<div id="q-box__buttons">
  <button id="prev-btn" type="button">Previous</button> 
  <button id="next-btn" type="button">Next</button> 
  <button id="submit-btn" type="submit">Submit</button>
</div>

一些必需的输入示例：

<div class="mt-2">
  <label class="form-label">First Name :</label> 
  <input class="form-control" id="fName" name="fName" type="text" required autocomplete="off">
    <div class="invalid-feedback">
    Please provide a First Name !
    </div>
</div>

Answer 1

添加验证功能：

创建一个函数来检查是否已填写所有必填字段：

JavaScript
function allRequiredFilled() {
  const requiredFields = document.querySelectorAll('input[required]');
  for (const field of requiredFields) {
    if (field.value.trim() === '') {
      return false;
    }
  }
  return true;
}

此函数查找所有必需的输入元素（input[required]）并迭代它们。它检查修剪值（删除前导/尾随空格）是否为空。如果任何必填字段为空，则返回 false。

2. 修改下一步按钮点击：

更新 nextBtn 点击事件监听器以在继续之前调用验证函数：

JavaScript
nextBtn.addEventListener('click', () => {
  if (allRequiredFilled()) { // Check if all required fields are filled
    current_step++;
    // Rest of your existing nextBtn logic...
  } else {
    // Show an error message or highlight empty fields (optional)
    console.error('Please fill all required fields!');
  }
});

现在，当单击“下一步”按钮时，它会检查 allRequiredFilled 是否返回 true。如果所有必填字段均已填写，则会继续执行现有逻辑。否则，您可以选择添加错误消息或使用 CSS 类突出显示空字段，以获得更好的用户体验。

3. 提交按钮（可选）：

您可以向submitBtn单击事件侦听器添加类似的验证，以便在表单提交之前进行额外的验证。但是，带有 required 属性的表单默认行为也应该阻止使用空字段提交。