JavaScript表单验证：解决事件监听器中验证逻辑不生效的问题

function areAllValid() {
    var isValid = true;
    if (!validateFullName()) {
      isValid = false;
    }
    if (!validateBread()) { // 如果 validateBread() 返回 undefined，!undefined 为 true
      isValid = false; // 导致 isValid 变为 false
    }
    // ... 其他验证
    return isValid;
}

// 假设 validateBread() 内部没有 return 语句
function validateBread() {
    // ... 检查逻辑和 UI 更新
    // 没有 return 语句
}

// 修正后的 validateBread 函数
function validateBread() {
    var breadOptions = document.querySelectorAll('input[name="bread"]');
    var isBreadChecked = false;

    for (var i = 0; i < breadOptions.length; i++) {
      if (breadOptions[i].checked) {
        isBreadChecked = true;
        break;
      }
    }

    if (isBreadChecked) {
      document.querySelector("#feedbbread").innerHTML = "Valid";
    } else {
      document.querySelector("#feedbbread").innerHTML = "Please select a bread option."; // 更正提示文本
    }

    return isBreadChecked; // 关键：显式返回布尔值
}

// 修正后的 validateMeats 函数
function validateMeats() {
    var meatsOptions = document.querySelectorAll('input[name="meats"]');
    var isMeatsChecked = false;

    for (var i = 0; i < meatsOptions.length; i++) {
      if (meatsOptions[i].checked) {
        isMeatsChecked = true;
        break;
      }
    }

    if (isMeatsChecked) {
      document.querySelector("#feedbmeats").innerHTML = "Valid";
    } else {
      document.querySelector("#feedbmeats").innerHTML = "Please select a meat option.";
    }

    return isMeatsChecked; // 关键：显式返回布尔值
}

// 修正后的 validateCheese 函数
function validateCheese() {
    var cheeseOptions = document.querySelectorAll('input[name="cheese"]');
    var isCheeseChecked = false;

    for (var i = 0; i < cheeseOptions.length; i++) {
      if (cheeseOptions[i].checked) {
        isCheeseChecked = true;
        break;
      }
    }

    if (isCheeseChecked) {
      document.querySelector("#feedbcheese").innerHTML = "Valid";
    } else {
      document.querySelector("#feedbcheese").innerHTML = "Please select a cheese option.";
    }

    return isCheeseChecked; // 关键：显式返回布尔值
}

// 修正后的 validateVeggie 函数
function validateVeggie() {
    var veggieOptions = document.querySelectorAll('input[name="veggie"]');
    var isVeggieChecked = false;

    for (var i = 0; i < veggieOptions.length; i++) {
      if (veggieOptions[i].checked) {
        isVeggieChecked = true;
        break;
      }
    }

    if (isVeggieChecked) {
      document.querySelector("#feedbveggie").innerHTML = "Valid";
    } else {
      document.querySelector("#feedbveggie").innerHTML = "Please select a veggie option.";
    }

    return isVeggieChecked; // 关键：显式返回布尔值
}

// 主验证函数和事件监听器保持不变
function areAllValid() {
    var isValid = true;
    // 任何一个验证失败，都将 isValid 设置为 false
    // 注意：这里使用短路逻辑可以更简洁，但为了清晰展示，保持原样
    if (!validateFullName()) {
      isValid = false;
    }
    if (!validateBread()) {
      isValid = false;
    }
    if (!validateEmailAndType()) {
      isValid = false;
    }
    if (!validateinfo()) {
      isValid = false;
    }
    if (!validatePhone()) {
      isValid = false;
    }
    if (!validateCheese()) {
      isValid = false;
    }
    if (!validateMeats()) {
      isValid = false;
    }
    if (!validateVeggie()) {
      isValid = false;
    }
    return isValid; // 返回整体验证结果
}

var previewbtn = document.querySelector("#previewbtn");
previewbtn.addEventListener("click", function() {
    if (areAllValid()) {
      document.querySelector("#previewFormData").innerHTML = "<h4>Thank you for your order!</h4>";
    } else {
      document.querySelector("#previewFormData").innerHTML = "<h4>Please finalize your selections.</h4>";
    }
});