JavaScript信用卡表单验证问题：提交仅刷新无响应求代码修复

Hey Darren, let's break down why your form isn't behaving as expected and fix it step by step. There are several small but critical issues in your code causing the page to refresh without any feedback:

1. Function & DOM Selection Mistakes #

• You forgot the function keyword when declaring validation() — without it, the browser won't recognize it as a valid function.
• There's a typo: getElementByID should be getElementById (note the lowercase "d" in "Id").
• You're grabbing the DOM input elements themselves instead of their actual values. Input fields return strings, so you need to access the .value property and convert it to a number for validation.

2. Misusing Number.isInteger() #

Number.isInteger() only returns true for actual integer values. Since form inputs return strings, passing them directly will always fail this check. You need to first convert the input value to a number (using Number() or parseInt()) before validating.

3. Not Blocking the Form's Default Submit Behavior #

When you click submit, the browser’s default action is to refresh the page and send data to the action URL. You need to prevent this default behavior if validation fails, and only let the form proceed if checks pass.

4. Incorrect CVV Validation Logic #

Your CVV check uses safenum>1000 — but 3-digit CVVs max out at 999, so this condition should be safenum > 999 instead.

5. Unnecessary window.open() #

Your form already has an action set to thankyou.php, so you don’t need window.open(). Let the form submit normally once validation passes.

Fixed Full Code #

HTML

<form name="payment" action="thankyou.php" onsubmit="return validation(event);" method="POST">
  <label for="ccnum">Credit Card Number:</label>
  <input type="text" id="ccnum" name="ccnum" placeholder="16-digit number">
  
  <label for="cvv">CVV:</label>
  <input type="text" id="cvv" name="cvv" placeholder="3-digit code">
  
  <button type="submit" class="btn">Continue to checkout</button>
</form>

JavaScript

function validation(event) {
  // Get input values and convert to numbers
  const ccNum = Number(document.getElementById("ccnum").value);
  const cvv = Number(document.getElementById("cvv").value);

  // Validate 16-digit credit card number
  if (!Number.isInteger(ccNum) || ccNum < 1000000000000000 || ccNum > 9999999999999999) {
    window.alert("Invalid credit card number. Please enter a 16-digit integer.");
    event.preventDefault(); // Stop form from submitting
    return false;
  }

  // Validate 3-digit CVV
  if (!Number.isInteger(cvv) || cvv < 100 || cvv > 999) {
    window.alert("Invalid CVV. Please enter a 3-digit integer.");
    event.preventDefault(); // Stop form from submitting
    return false;
  }

  // All checks passed: let form submit normally
  return true;
}

Key Improvements Explained #

• We pass the event object to the validation function to call preventDefault() when validation fails.
• The onsubmit attribute uses return validation(event); — this tells the browser to only submit the form if the function returns true.
• Added placeholders and labels for better user experience.

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