Formular Validierung funktioniert nicht wie erwartet

Question

Ich habe einen Cart-Mechanismus mit PHP erstellt und die Validierung mit Hilfe von JavaScript durchgeführt und die Validierung funktioniert nicht.

Dies ist mein eigentlicher PHP-Skript:

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

und dies ist meine Validierung in javascript:

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

Wenn ich nichts getroffen einreichen funktioniert.

Answer 1

Kommentar Konvertieren

zu beantworten, wenn wir die Inline-Handler einreichen halten, übergeben Sie das Formular this

onsubmit = 'return validateAll(this);' 

Dann können wir das Formular direkt in dem Handler zugreifen, ohne das längere Dokument zu verwenden. 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; 
    } 
} 

Hier ist ein besserer Weg, unaufdringlich Code

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

Und all dies kann durch die Verwendung

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