Javascript 表单验证未按预期工作

我使用PHP创建了一个购物车机制，并在JavaScript的帮助下进行了验证，但验证不起作用

这是我实际的php脚本：

$result = mysqli_query($conn, "SELECT * FROM products");
while($row = mysqli_fetch_array($result)){

  $fieldidval[] = $row['product_id'];
  $fieldnameval[] = $row['product_name'];
  $fieldcostval[] = $row['product_cost'];
  $fieldimgval[] = $row['product_image'];
  $fielddescval[] = $row['product_description'];

}

//printing field values

for($i = 0; $i < mysqli_num_rows($result); $i++){

  echo "<tr><form action = 'cart.php?pid=" . $fieldidval[$i] . "&name=" .$fieldnameval[$i] . "&cost=" . $fieldcostval[$i] . "' method = 'post' name = 'tocart' onsubmit = 'return(validateAll());'><td>" . $fieldnameval[$i] . "</td><td>" . $fieldcostval[$i] . "</td><td>" . $fieldimgval[$i] . "</td><td>" . $fielddescval[$i] . "</td><td><input type = 'text' name ='qty_input[$i]' ></td><td><input type = 'submit' name = 'submit'></td></form></tr>"; }

---

当我点击submit时，什么都不起作用

将注释转换为答案

如果保留内联提交处理程序，请使用

this

onsubmit = 'return validateAll(this);' 

然后我们可以直接在处理程序中访问表单，而不必使用较长的document.formname

function validateAll(form) { // "this" -> whatever is in (....) here
  var qty_input= form["qty_input[0]"]; 
  if (qty_input.value == "") { 
    alert("Please enter a valid number"); 
     qty_input.focus(); 
     return false; 
  }
}

这里有一个更好的方法使用不引人注目的代码

window.onload=function() { // when page loads. You can use event listener too
  document.querySelector("[name=tocart]").onsubmit=function() {
    var qty_inputs = document.querySelectorAll("[name^=qty_input]"); // starts with
    for (var i=0;i<qty_inputs.length;i++) { 
      if (qty_inputs[i].value == "") { 
         alert("Please enter a valid number"); 
         qty_inputs[i].focus(); 
         return false; 
      }
    }
  }
}

window.onload=function（）{//当页面加载时。您也可以使用事件侦听器
document.querySelector（“[name=tocart]”）。onsubmit=function（）{
var qty\u input=document.querySelectorAll（“[name^=qty\u input]”；//以开头
对于（var i=0；i将注释转换为答案

如果保留内联提交处理程序，请使用
this

onsubmit = 'return validateAll(this);' 

然后我们可以直接在处理程序中访问表单，而不必使用较长的document.formname

function validateAll(form) { // "this" -> whatever is in (....) here
  var qty_input= form["qty_input[0]"]; 
  if (qty_input.value == "") { 
    alert("Please enter a valid number"); 
     qty_input.focus(); 
     return false; 
  }
}

这里有一个更好的方法使用不引人注目的代码

window.onload=function() { // when page loads. You can use event listener too
  document.querySelector("[name=tocart]").onsubmit=function() {
    var qty_inputs = document.querySelectorAll("[name^=qty_input]"); // starts with
    for (var i=0;i<qty_inputs.length;i++) { 
      if (qty_inputs[i].value == "") { 
         alert("Please enter a valid number"); 
         qty_inputs[i].focus(); 
         return false; 
      }
    }
  }
}

window.onload=function（）{//当页面加载时。您也可以使用事件侦听器
document.querySelector（“[name=tocart]”）。onsubmit=function（）{
var qty\u input=document.querySelectorAll（“[name^=qty\u input]”；//以开头
对于（var i=0；i请单击
添加呈现的HTML并完成JS-我们不关心PHP，因为问题是JS客户端。请创建一个也：
onsubmit='returnvalidateAll（this）；'
使用
函数validateAll（form）{var qty\u input=form[“qty\u input[0]”；if（qty\u input.value==”）{alert(“请输入有效数字”）；数量输入。焦点（）；返回false；}
@mplungjan感谢您提供的代码。@mplungjan以及我们为什么要使用
这个
？我从网上拿了一个工作示例。请您详细说明以加深我的理解。请单击
添加呈现HTML并完成JS-我们不关心PHP，因为问题是JS客户端。请创建一个：
onsubmit='returnvalidateAll（this）；'
使用函数validateAll（form）{var qty\u input=form[“qty\u input[0]”；if（qty\u input.value==“”）{alert（“请输入有效数字”）；qty\u input.focus（）；return false；}
@mplungjan谢谢您提供的代码。@mplungjan以及我们为什么要使用
这个
？我从网络上取了一个工作示例。请您详细说明一下，以加深我的理解。那么您的意思是，不需要javascript表单验证脚本，我可以在每个输入的最后使用
required
g？这不会有任何后果吗？如果你只想测试空白，这是正确的。也要在服务器上重复测试以确定哦，好的。谢谢，你的答案对我帮助很大。不客气。你可以将接受改为我的答案，因为我是第一个给出解决方案的人。你的意思是说不需要javascript表单验证在脚本上，我可以在每个输入标记的末尾使用
required
？这不会有任何后果吗？如果您只想测试空白，这是正确的。也可以在服务器上重复测试以确保哦，好的。谢谢，您的答案对我帮助很大。欢迎您。您可以将接受更改为我的答案，因为我是第一个给出s的解决方案