PHP表单验证需求：单选选YES时需勾选至少一个复选框

Hey there! Great to hear your PHPMailer form is already working smoothly—let's tackle that conditional validation logic you need. We'll implement both client-side (front-end) validation for instant user feedback and server-side (back-end) validation (super critical, since front-end checks can be easily bypassed).

Step 1: Update Your HTML Form Structure #

First, make sure your form elements have consistent names so we can target them reliably. Here's a sample structure to work with:

<form id="feedbackForm" method="POST" action="submit-form.php">
  <!-- Radio Button Group -->
  <div class="radio-group">
    <label>
      <input type="radio" name="confirm_selection" value="yes" required> YES
    </label>
    <label>
      <input type="radio" name="confirm_selection" value="no" required> NO
    </label>
  </div>

  <!-- Checkbox Group -->
  <div class="checkbox-group">
    <label><input type="checkbox" name="feature_options[]" value="feature1"> Feature A</label>
    <label><input type="checkbox" name="feature_options[]" value="feature2"> Feature B</label>
    <label><input type="checkbox" name="feature_options[]" value="feature3"> Feature C</label>
  </div>

  <button type="submit">Submit Form</button>
  <div class="error-alert" style="color: red; display: none; margin-top: 10px;"></div>
</form>

Note: We use feature_options[] as the checkbox name so PHP receives selected values as an array.

Step 2: Add Client-Side Validation (JavaScript) #

Add this script to give users immediate feedback when they try to submit without meeting the condition—no server round-trip needed:

document.getElementById('feedbackForm').addEventListener('submit', function(e) {
  const selectedRadio = document.querySelector('input[name="confirm_selection"]:checked');
  const checkedBoxes = document.querySelectorAll('input[name="feature_options[]"]:checked');
  const errorAlert = document.querySelector('.error-alert');

  // Reset error state
  errorAlert.style.display = 'none';
  errorAlert.textContent = '';

  // Block submission if YES is selected but no checkboxes are ticked
  if (selectedRadio.value === 'yes' && checkedBoxes.length === 0) {
    e.preventDefault();
    errorAlert.textContent = 'Please select at least one feature when choosing YES.';
    errorAlert.style.display = 'block';
  }
});

Step 3: Add Server-Side Validation (PHP) #

This is the most important layer—never trust front-end input! Add this logic to your form processing file (submit-form.php) before your existing PHPMailer code:

<?php
// Initialize error storage
$formErrors = [];

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Sanitize and retrieve form data
  $confirmChoice = isset($_POST['confirm_selection']) ? trim($_POST['confirm_selection']) : '';
  $selectedFeatures = isset($_POST['feature_options']) ? $_POST['feature_options'] : [];

  // Enforce conditional checkbox rule
  if ($confirmChoice === 'yes' && empty($selectedFeatures)) {
    $formErrors[] = 'Please select at least one feature when choosing YES.';
  }

  // If no errors, proceed with PHPMailer
  if (empty($formErrors)) {
    // Your existing PHPMailer code goes here
    // Example:
    // require 'PHPMailer/src/PHPMailer.php';
    // $mail = new PHPMailer\PHPMailer\PHPMailer();
    // ... rest of your email sending logic
    echo '<p style="color: green;">Form submitted successfully!</p>';
  } else {
    // Display errors to the user (sanitize output to prevent XSS)
    foreach ($formErrors as $error) {
      echo '<p style="color: red;">' . htmlspecialchars($error) . '</p>';
    }
  }
}
?>

Quick Tips: #

• Always use htmlspecialchars() when displaying user-facing errors to prevent XSS attacks.
• The feature_options[] array only exists in $_POST if at least one checkbox is ticked—using isset() avoids undefined index warnings.
• Server-side validation is non-negotiable: users can disable JavaScript to bypass front-end checks, so this ensures your rule is enforced no matter what.

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