如何用JavaScript显示隐藏验证消息？到期日下拉框验证求助

Hey there! Let's get that expiry date validation sorted out. The logic you need is straightforward: show the validation message only when exactly one of the month/year dropdowns is selected, and hide it when both are selected or neither is.

First, let's complete your HTML snippet with a proper structure and a place for the validation message:

<div class="field field--with-dropdown clearfix" style="height: 50px;">
  <label for="field-country">Expiry date</label>
  <div class="select--half">
    <select id="monthDropdown" name="month">
      <option value="">Select Month</option>
      <option value="1">Jan</option>
      <option value="2">Feb</option>
      <!-- Add remaining months here -->
    </select>
  </div>
  <div class="select--half">
    <select id="yearDropdown" name="year">
      <option value="">Select Year</option>
      <option value="2024">2024</option>
      <option value="2025">2025</option>
      <!-- Add future years here -->
    </select>
  </div>
  <!-- Validation message - hidden by default -->
  <div id="expiryValidationMsg" style="color: #dc3545; margin-top: 8px; display: none;">
    Please select both month and year
  </div>
</div>

Solution with Vanilla JavaScript #

This uses plain JS to listen for changes on both dropdowns and toggle the validation message based on your rules:

// Grab the elements we need
const monthDropdown = document.getElementById('monthDropdown');
const yearDropdown = document.getElementById('yearDropdown');
const validationMsg = document.getElementById('expiryValidationMsg');

// Core validation logic
function checkExpiryValidation() {
  const hasSelectedMonth = monthDropdown.value !== '';
  const hasSelectedYear = yearDropdown.value !== '';

  // Show message ONLY if exactly one dropdown is selected
  if ((hasSelectedMonth && !hasSelectedYear) || (!hasSelectedMonth && hasSelectedYear)) {
    validationMsg.style.display = 'block';
  } else {
    validationMsg.style.display = 'none';
  }
}

// Run validation when either dropdown changes
monthDropdown.addEventListener('change', checkExpiryValidation);
yearDropdown.addEventListener('change', checkExpiryValidation);

// Optional: Run validation on page load if defaults are set
checkExpiryValidation();

Solution with jQuery (if you're using it) #

If your project uses jQuery, here's a concise version:

$(document).ready(function() {
  const $month = $('#monthDropdown');
  const $year = $('#yearDropdown');
  const $validationMsg = $('#expiryValidationMsg');

  function validateExpiry() {
    const monthIsSelected = $month.val() !== '';
    const yearIsSelected = $year.val() !== '';

    $validationMsg.toggle((monthIsSelected && !yearIsSelected) || (!monthIsSelected && yearIsSelected));
  }

  // Attach event listener to both dropdowns
  $month.add($year).on('change', validateExpiry);

  // Optional: Initialize validation state on page load
  validateExpiry();
});

Key Notes #

• Replace the id values (monthDropdown, yearDropdown, expiryValidationMsg) with your actual element IDs if they're different.
• The toggle() method in jQuery automatically shows/hides the element based on the boolean condition passed to it—super handy!
• The optional page-load check ensures the validation message shows correctly if one dropdown is pre-selected when the page loads.

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