如何在无表单提交场景下实现输入必填验证？

Got it, let's tackle this issue. Since you're handling navigation via custom nextX() functions instead of a standard form submit, the native HTML required attribute won't trigger automatically. We need to add client-side validation directly into your navigation logic to ensure users can't proceed without filling in the mandatory fields.

Step 1: Update Your Navigation Functions #

Modify each nextX() function to check if the corresponding input is empty before moving to the next question. Here's how to implement this for your first two questions:

function next1() {
  const answer1 = document.getElementById('answer1').value.trim();
  if (!answer1) {
    alert('Por favor, preencha o nome da empresa!'); // Match your UI's Portuguese language
    document.getElementById('answer1').focus();
    return; // Stop navigation if the field is empty
  }
  // Add your existing logic to store the answer here
  // Switch to the next section
  document.getElementById('1').style.display = 'none';
  document.getElementById('2').style.display = 'block';
}

function next2() {
  const answer2 = document.getElementById('answer2').value.trim();
  if (!answer2) {
    alert('Por favor, preencha o ramo de atuação!');
    document.getElementById('answer2').focus();
    return;
  }
  // Store the answer and navigate to the next section
  document.getElementById('2').style.display = 'none';
  // Add code to show section 3 here...
}

// Back functions don't usually need validation, but here's the updated back1 for reference
function back1() {
  document.getElementById('2').style.display = 'none';
  document.getElementById('1').style.display = 'block';
}

Step 2: (Optional) Reusable Validation Function #

Since you have 15 questions, writing duplicate check logic for each nextX() function is inefficient. Create a reusable validation function to clean up your code:

function validateInput(inputId, errorMessage) {
  const input = document.getElementById(inputId);
  const value = input.value.trim();
  
  if (!value) {
    alert(errorMessage);
    input.focus();
    return false;
  }
  return true;
}

// Now use this function in your navigation handlers:
function next1() {
  if (!validateInput('answer1', 'Por favor, preencha o nome da empresa!')) return;
  // Store answer and navigate
  document.getElementById('1').style.display = 'none';
  document.getElementById('2').style.display = 'block';
}

function next2() {
  if (!validateInput('answer2', 'Por favor, preencha o ramo de atuação!')) return;
  // Store answer and navigate to next section
  document.getElementById('2').style.display = 'none';
}

Step 3: (Bonus) Improve UX with Inline Errors #

For a smoother experience, replace intrusive alerts with inline error messages. First, add an error element to each question section:

<!-- Inside the first question's .question-input div -->
<div id="error1" style="color: red; margin-top: 8px; display: none;">Por favor, preencha o nome da empresa!</div>

Then update the validation function to show/hide this element instead of using alerts:

function validateInput(inputId, errorId, errorMessage) {
  const input = document.getElementById(inputId);
  const errorElement = document.getElementById(errorId);
  const value = input.value.trim();
  
  if (!value) {
    errorElement.textContent = errorMessage;
    errorElement.style.display = 'block';
    input.focus();
    return false;
  }
  // Hide the error if the field is valid
  errorElement.style.display = 'none';
  return true;
}

// Update next1() to use this:
function next1() {
  if (!validateInput('answer1', 'error1', 'Por favor, preencha o nome da empresa!')) return;
  // Store answer and navigate
  document.getElementById('1').style.display = 'none';
  document.getElementById('2').style.display = 'block';
}

Why Native required Isn't Working #

Quick note: The HTML required attribute only triggers validation when a form is submitted via a <button type="submit"> or the form.submit() method. Since you're using type="button" and custom onclick handlers, the browser doesn't run its native validation checks—hence why we need to build our own.

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