HTML:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST"> <form name="#" method="POST" onsubmit="return validateForm();"> <table> <tr> <td>Select Warehouse:</td> <td><input type="text" id="W_ID" name="W_ID" placeholder="numbers only"></td> <span class="invalid-feedback"><?php echo $warehouse_err; ?></span> </tr> <tr> <td>Select District:</td> <td><input type="text" id="D_ID" name="D_ID" placeholder="numbers only"></td> <span class="invalid-feedback"><?php echo $district_err; ?></span> </tr> <tr> <td>Select Customer:</td> <td><input type="text" id="C_ID" name="C_ID" placeholder="numbers only"></td> <span class="invalid-feedback"><?php echo $customer_err; ?></span> </tr> </table>Así que traté de validar la entrada del usuario para W_ID, C_ID y D_ID. Por ejemplo, si la entrada de un usuario son algunas cadenas, devuelva un mensaje de error antes de enviar. Escribí un código Javascript en este archivo .php pero no pude hacerlo funcionar. Consulte los códigos JS a continuación:
JavaScript:
<script> function validateForm(){ var W_ID = document.getElementById("W_ID").value; var D_ID = document.getElementById("D_ID").value; var C_ID = document.getElementById("C_ID").value; var numbers = /^[0-9]+$/; //check if input is number if(!(W_ID.value.match(numbers) { alert('Please only enter numbers.'); } else if(!(D_ID.value.match(numbers) { alert('Please only enter numbers.'); } else if(!(C_ID.value.match(numbers) { alert('Please only enter numbers.'); }else { alert('Successfully! form has been submitted.'); } </script>Además, ¿cómo envuelvo el código JS dentro de PHP? ¡Muchas gracias! He estado atrapado por mucho tiempo
"formulario no debe contener otros elementos de formulario." para que no tenga que usar dos etiquetas
<form>.
Simplemente proporcione una ID a su formulario y en JavaScript maneje el evento de envío.
<form id="myForm" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" > <table> <tr> <td>Select Warehouse:</td> <td> <input type="text" id="W_ID" name="W_ID" placeholder="numbers only" /> </td> <span class="invalid-feedback"><?php echo $warehouse_err; ?></span> </tr> <tr> <td>Select District:</td> <td> <input type="text" id="D_ID" name="D_ID" placeholder="numbers only" /> </td> <span class="invalid-feedback"><?php echo $district_err; ?></span> </tr> <tr> <td>Select Customer:</td> <td> <input type="text" id="C_ID" name="C_ID" placeholder="numbers only" /> </td> <span class="invalid-feedback"><?php echo $customer_err; ?></span> </tr> </table> <button type="submit">Submit</button> </form>El guión puede verse así:
var form = document.getElementById("myForm"); form.addEventListener("submit", function (e) { e.preventDefault(); var target = e.target; var formData = new FormData(target); var data = Object.fromEntries(formData.entries()); var regex = /^[0-9]+$/; if ( !data.W_ID.match(regex) || !data.D_ID.match(regex) || !data.C_ID.match(regex) ) { alert("Only numbers accepted."); } else { // Continue form submittion. this.submit(); } });https://codesandbox.io/s/keen-galileo-tvznl?file=/script.js:0-439