多组商品名称与价格输入框的JS表单验证优化需求

Hey there! Let's fix that repetitive validation code and get your loop working properly. The key issue with your initial loop attempt was trying to create dynamic variable names (like 'p'+k+l), which isn't valid JavaScript syntax—and honestly, you don't even need those separate variables anyway.

Here's a clean, optimized version of your validation function that uses a simple loop to handle all 5 product-price pairs:

function empty() {
  let hasAnyProduct = false;

  // Loop through each product-price pair (1 to 5)
  for (let i = 1; i <= 5; i++) {
    // Get values for the current pair, trimming extra whitespace
    const productName = document.getElementById(`pname${i}`).value.trim();
    const productPrice = document.getElementById(`price${i}`).value.trim();

    // Check if only one field in the pair is filled
    if ((productName !== "" && productPrice === "") || (productName === "" && productPrice !== "")) {
      alert("Enter product with price");
      return false;
    }

    // Track if at least one product has been entered
    if (productName !== "") {
      hasAnyProduct = true;
    }
  }

  // If no products were entered at all
  if (!hasAnyProduct) {
    alert("Enter a product");
    return false;
  }

  // All validation checks passed
  return true;
}

How this works: #

• Loop through pairs: We use i from 1 to 5 to target each pname{i} and price{i} element dynamically. Template literals (${i}) make the ID concatenation clean, but if you need to support older browsers, you can use "pname" + i instead.
• Trim whitespace: Adding .trim() ensures that accidental spaces don't count as valid input.
• Inconsistent pair check: For each pair, we check if one field is filled and the other isn't—if so, we show the alert and stop execution.
• Check for any product: We track if at least one product name was entered, so we can alert the user if they submit an empty form.

Why your original loop failed: #

Trying to declare variables like var 'p'+k+l isn't allowed in JavaScript. Instead of storing every product and price in separate variables, we process each pair immediately inside the loop, which is far more efficient and readable.

This code will work seamlessly with your existing PHP-generated form structure, and it's easy to adjust if you ever need to add more product pairs (just change the loop's upper limit from 5 to whatever number you need).

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