如何在HTML输入框中实现输入验证及提交后答案正确性校验？

Let's fix these issues step by step and implement your required functionality properly:

Key Problems to Address #

• Unintended early correctness checks: The original code runs the answer correctness validation on every input change, which isn't what we want. We need to separate format validation (during input) from correctness checks (only on submit).
• Missing decimal limit feedback: Instead of silently reverting invalid input, we should show a clear validation message when users enter more than two decimal places.

Modified Working Code #

HTML #

<form id="myform"> 
  <input type="number" pattern="^\d*(\.\d{0,2})?$" id="q4" dcorrect="14.23" placeholder="number" required> minutes 
  <input type="submit" /> 
</form>

JavaScript #

// Handle real-time format validation (max 2 decimal places)
document.getElementById('q4').addEventListener('input', function(e) {
  const input = e.target;
  const decimalPattern = new RegExp(input.pattern);

  // Show error if input doesn't match the decimal rule (and isn't empty)
  if (!decimalPattern.test(input.value) && input.value.trim() !== '') {
    input.setCustomValidity('Please enter a number with at most 2 decimal places');
  } else {
    input.setCustomValidity(''); // Clear error when input is valid
  }
});

// Handle form submission and answer correctness check
document.getElementById('myform').addEventListener('submit', function(e) {
  e.preventDefault(); // Stop default form submission behavior
  const input = document.getElementById('q4');

  // First confirm format is valid before checking answer correctness
  if (input.checkValidity()) {
    // Compare input value to dcorrect attribute (as numbers, not strings)
    if (parseFloat(input.value) === parseFloat(input.getAttribute('dcorrect'))) {
      input.setCustomValidity('Correct');
    } else {
      input.setCustomValidity('Incorrect');
    }
    // Force the browser to display the validation message
    input.reportValidity();
  } else {
    // Show format validation error if input is invalid
    input.reportValidity();
  }
});

What Changed & Why #

• Separated validation logic:
  • Real-time input event now only checks for the decimal limit rule, giving users immediate feedback on format issues.
  • Correctness checks are now tied exclusively to the form's submit event, so they only run when the user clicks the submit button.
• Improved user feedback:
  • Replaced the silent value revert with explicit validation messages using the native HTML5 validation API, so users understand exactly what's wrong.
  • Added the required attribute to prevent empty submissions (optional but boosts UX).
• Robust number comparison:
  • Used parseFloat() to compare values as numbers instead of strings, avoiding edge cases like "14.230" vs "14.23" being treated as mismatches.

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