JS表单验证故障求助：背景色、邮箱校验、下拉框联动问题

Hey there! Let's work through those three form validation bugs together—here's how to fix each one step by step:

1. Fixing the Invalid Field Background Color #

The most common reason the background isn't changing is that your JS isn't explicitly targeting the field's styling, or you're missing a clear way to mark invalid states. Let's adjust your click handler to either set the background directly or use a CSS class (better for maintainability):

Option 1: Direct style manipulation #

document.getElementById("mysub").addEventListener("click", function(e) {
  e.preventDefault(); // Stop form submission during validation
  
  // Example for a required input field
  const usernameField = document.getElementById("username");
  if (!usernameField.value.trim()) {
    usernameField.style.backgroundColor = "#ffebee"; // Light red for invalid
  } else {
    usernameField.style.backgroundColor = ""; // Reset to default
  }
  
  // Repeat this pattern for all fields you need to validate
});

Option 2: Use CSS classes (recommended) #

First define a CSS class for invalid fields:

.invalid-field {
  background-color: #ffebee;
  border-color: #c62828;
}

Then toggle the class in your JS:

if (!usernameField.value.trim()) {
  usernameField.classList.add("invalid-field");
} else {
  usernameField.classList.remove("invalid-field");
}

2. Fixing the Email Validation Logic #

Your current email check is likely using a regex that's either too strict or doesn't match the pattern you need (contains @ and a 2-3 character top-level domain). Replace your existing email validation with this updated logic:

const emailField = document.getElementById("email");
// Regex matches emails with @, and a suffix like .com, .co, .io (2-3 letters)
const validEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$/;

const emailValue = emailField.value.trim();
if (!validEmailRegex.test(emailValue)) {
  alert("Please enter a valid email (e.g., yourname@domain.com or yourname@domain.co)");
  emailField.classList.add("invalid-field");
} else {
  emailField.classList.remove("invalid-field");
}

This regex ensures:

• A valid local part (before @) with letters, numbers, and common symbols
• A mandatory @ symbol
• A valid domain (after @)
• A top-level domain (like .com, .io) that's 2-3 characters long

3. Showing the Input When "Other" is Selected #

You need to add a change event listener to your dropdown to detect when "Other" is selected, then toggle the visibility of the hidden input. Here's the full implementation:

First, your HTML structure #

<select id="category-dropdown">
  <option value="work">Work</option>
  <option value="personal">Personal</option>
  <option value="Other">Other</option>
</select>

<!-- Hidden input for "Other" option -->
<input type="text" id="other-category" style="display: none;" placeholder="Please specify your category">

Then the JS listener #

const dropdown = document.getElementById("category-dropdown");
const otherInput = document.getElementById("other-category");

dropdown.addEventListener("change", function() {
  if (this.value === "Other") {
    otherInput.style.display = "block"; // Show the input
    otherInput.required = true; // Make it required if needed
  } else {
    otherInput.style.display = "none"; // Hide it again
    otherInput.required = false;
    otherInput.value = ""; // Clear any existing value
  }
});

Putting all these fixes together should resolve all three issues you're facing!

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