如何用JavaScript验证多选下拉列表？提交后错误无法消除求助

I see the issue with your validation logic—let's break this down and fix it.

The Problem with Your Current Code #

Your check logs.selectedIndex == 0 works for single-select dropdowns, but it's not reliable for multi-select elements, especially when using the Chosen plugin. Here's why:

• For native multi-selects, selectedIndex only returns the index of the first selected option. If a user selects a non-empty option (like "ASA") but also accidentally selects the empty option, selectedIndex will still be 0—triggering the error incorrectly.
• When using Chosen, the native <select> is hidden, and Chosen handles UI interactions separately. The native selectedIndex property might not sync properly with the Chosen UI, leading to false positives even when options are selected.

Solution 1: Native JavaScript Validation (Works Without Chosen) #

Instead of checking selectedIndex, validate that at least one non-empty option is selected using selectedOptions:

var logs = document.getElementById('logs');
var myForm = document.getElementById('myForm');

function loggingCheck(event) {
  // Get all selected options and filter out the empty one
  const hasValidSelection = Array.from(logs.selectedOptions).some(opt => opt.value.trim() !== '');
  
  if (!hasValidSelection) {
    document.getElementById('loggingError').innerHTML = "Please select at least one logging device";
    event.preventDefault();
  } else {
    document.getElementById('loggingError').innerHTML = "";
  }
}

myForm.addEventListener('submit', loggingCheck);

Solution 2: Validation for Chosen Plugin #

If you're keeping the Chosen plugin, use its built-in API to get selected values (since the native select's state might not sync):

var myForm = document.getElementById('myForm');

function loggingCheck(event) {
  // Use Chosen's API to get selected values
  const selectedValues = $('#logs').chosen('get_selected_values');
  // Check if there's at least one non-empty value
  const hasValidSelection = selectedValues.some(val => val.trim() !== '');
  
  if (!hasValidSelection) {
    document.getElementById('loggingError').innerHTML = "Please select at least one logging device";
    event.preventDefault();
  } else {
    document.getElementById('loggingError').innerHTML = "";
  }
}

myForm.addEventListener('submit', loggingCheck);

Why This Works #

• Both solutions check for actual valid selections (non-empty values) instead of relying on the index of the first selected option.
• The Chosen-specific solution uses the plugin's own method to fetch selected values, ensuring you're getting the state that matches what the user sees in the UI.

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