フォーム検証が期待通りに機能しない

Question

私は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>"; } 

、これはJavaScriptで私の検証です：

function validateAll(){ 
    if(document.tocart.qty_input[0].value == ""){ 
    alert("Please enter a valid number"); 
    document.tocart.qty_input.focus(); 
    return false; 
    } 

私は何も動作submitをクリックすると。

Answer 1

はその後、我々は長い文書を使用せずに、ハンドラ内で直接フォームにアクセスすることができ、我々はインラインハンドラを提出し続ける場合は、

に答えるthis

onsubmit = 'return validateAll(this);' 

を使用してフォームを渡すためにコメントを変換します。フォーム名

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; 
    } 
} 

ここでは控えめなコード

を使用して、より良い方法です10

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; 
     } 
    } 
    } 
} 

そして、すべてこれは `<>`レンダリングされたHTMLとCOMPLETE JSを追加]をクリックしてください

<input type = 'text' name ='qty_input[$i]' required />