配对表单字段验证：捐赠表单校验需求技术问询

Hey Caroline, let's build this donation form and nail the validation you need! I'll walk you through the full implementation with code examples, plus clarify the technical terms you might have been searching for.

Step 1: HTML Structure #

First, let's lay out the form with your two donation options. Each option is a group of linked fields (a selection/input + amount box), and we'll add a container for error messages.

<form id="donationForm">
  <h3>Choose Your Donation Method</h3>
  
  <!-- Option 1: Dropdown + Amount -->
  <div class="donation-group">
    <label for="donationType">Donation Category:</label>
    <select id="donationType">
      <option value="">-- Select a Category --</option>
      <option value="general">General Fund</option>
      <option value="education">Education Program</option>
      <option value="relief">Disaster Relief</option>
    </select>
    
    <label for="typeAmount">Amount ($):</label>
    <input type="number" id="typeAmount" min="1" step="0.01" placeholder="Enter amount">
  </div>

  <!-- Option 2: Custom Input + Amount -->
  <div class="donation-group">
    <label for="customPurpose">Custom Donation Purpose:</label>
    <input type="text" id="customPurpose" placeholder="e.g., 'Animal Shelter Support'">
    
    <label for="customAmount">Amount ($):</label>
    <input type="number" id="customAmount" min="1" step="0.01" placeholder="Enter amount">
  </div>

  <button type="submit">Submit Donation</button>
  <div id="errorMessage" style="color: red; margin-top: 10px;"></div>
</form>

Step 2: JavaScript Validation Logic #

Next, we'll add the validation rules you specified. The key here is grouped field validation—making sure each pair of fields in a group is either fully filled out or left blank, and that at least one group is completed.

const form = document.getElementById('donationForm');
const errorMsg = document.getElementById('errorMessage');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // Stop form from submitting by default
  
  // Get field values (trim whitespace for text inputs)
  const donationType = document.getElementById('donationType').value;
  const typeAmount = document.getElementById('typeAmount').value.trim();
  const customPurpose = document.getElementById('customPurpose').value.trim();
  const customAmount = document.getElementById('customAmount').value.trim();
  
  errorMsg.textContent = ''; // Clear previous errors
  
  // Check 1: No fields filled at all
  if (!donationType && !typeAmount && !customPurpose && !customAmount) {
    errorMsg.textContent = 'Please select a donation method and fill out the required fields.';
    return;
  }
  
  // Check 2: Option 1 group has only one field filled
  if ((donationType && !typeAmount) || (!donationType && typeAmount)) {
    errorMsg.textContent = 'For the pre-defined category, please select a category AND enter an amount.';
    return;
  }
  
  // Check 3: Option 2 group has only one field filled
  if ((customPurpose && !customAmount) || (!customPurpose && customAmount)) {
    errorMsg.textContent = 'For the custom purpose, please enter a purpose AND an amount.';
    return;
  }
  
  // If all checks pass, you can submit the form here
  alert('Donation form submitted successfully!');
  // form.submit(); // Uncomment this line to actually submit the form
});

Key Technical Terms Explained #

Since you mentioned struggling with terminology, here's what you're implementing:

• Grouped Field Validation: Ensuring related fields (like a category and its amount) are treated as a unit—either both filled or both empty.
• Form Submission Event Listener: A JavaScript function that runs when the user tries to submit the form, allowing us to intercept and validate data before sending it.
• Non-Empty Check: Verifying that fields have content (we use trim() to ignore whitespace-only inputs).
• Conditional Validation: Applying different rules based on which fields are filled (e.g., only check the custom group if one of its fields has content).

Quick Styling Tip (Optional) #

To make the groups look cleaner, add a little CSS to separate them:

.donation-group {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

label {
  display: inline-block;
  width: 200px;
  margin: 5px 0;
}

input, select {
  padding: 5px;
  width: 250px;
}

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