OTP Input Validation and Error Handling

OTP Input Validation and Error Handling

Validation makes the OTP input production-ready. Here is how to validate and show errors.

Numeric-Only Validation

input.addEventListener("input", (e) => {
  e.target.value = e.target.value.replace(/\D/g, "");
});

Filter non-numeric characters on every input. This prevents letters and special characters.

Completion Check

function isComplete() {
  return Array.from(inputs).every((input) => input.value !== "");
}

function checkComplete() {
  verifyBtn.disabled = !isComplete();
}
``
The verify button is only enabled when all inputs are filled.

### OTP Value

```js
function getOTP() {
  return Array.from(inputs).map((input) => input.value).join("");
}

Join all input values to get the full OTP string.

Server-Side Validation

async function verifyOTP() {
  const otp = getOTP();
  try {
    const res = await fetch("/api/verify-otp", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ otp }),
});
    const data = await res.json();
    if (data.success) {
      showSuccess("OTP verified!");
    } else {
      showError("Invalid OTP. Please try again.");
      clearInputs();
    }
  } catch (err) {
    showError("Verification failed. Please try again.");
  }
}
``
### Error Display

```js
function showError(message) {
  const errorDiv = document.getElementById("otpError");
  errorDiv.textContent = message;
  errorDiv.style.display = "block";
  inputs.forEach((input) => input.classList.add("error"));
}

function clearErrors() {
  const errorDiv = document.getElementById("otpError");
  errorDiv.style.display = "none";
  inputs.forEach((input) => input.classList.remove("error"));
}
``
### Error CSS

```css
.otp-input.error { border-color: #ff4444; }
.otp-error { color: #ff4444; font-size: 14px; margin-top: 8px; }
``
### Clear Inputs

```js
function clearInputs() {
  inputs.forEach((input) => (input.value = ""));
  inputs[0].focus();
  verifyBtn.disabled = true;
}
``
After an error, clear the inputs and focus the first one for retry.

### Resend OTP

```js
function resendOTP() {
  clearInputs();
  clearErrors();
  // trigger resend API
  startResendTimer();
}
``
### The Takeaway

OTP validation: numeric-only (regex filter), completion check (all inputs filled), server-side validation (API call), error display (message + red border), clear inputs on error, and resend OTP. Production-ready OTP inputs handle all these cases.