Tengo un formulario que debe validarse antes de enviarlo y la notificación debe mostrarse con un error sin volver a cargar la página.

Código de formulario:

 <button name="save" type="submit" form="product_form">Save</button> <div> <form id="product_form" method="POST""> <label for="sku">SKU: </label> <input type="text" name="sku" id="sku" required><br> <label for="name">Name: </label> <input type="text" name="name" id="name" required><br> <label for="price">Price: </label> <input type="text" name="price" id="price" required><br> </div> </form> <div id="validaton"></div>

Hice la validación en otro validateData.php :

 <?php include __DIR__ . "/connectQuery.php"; $sku=$_POST["sku"]; $name=$_POST["name"]; $price=$_POST["price"]; $data = $query->getAllProducts(); $objectMap = new ObjectMap($data); $productsArray = $objectMap->getAllProducts(); $skuError=""; $priceError=""; $dataError=""; // SKU validation foreach($productsArray as $product) { if($product->getSku()==$sku) { $skuError="Your SKU is not unique!"; } } echo $skuError; //Price validation if (!is_numeric($price)) { $priceError = "Please enter valid data for price!"; } echo $priceError; //if there is no error if($priceError!="" && $skuError !="") { header("Location: index.php"); }

Entonces, mi idea era cuando envío el formulario, llama a este validateData.php , verifica el valor, si hay un error, hace eco del error y, si no, redirija a index.php y funciona, pero no puedo mostrar esos mensajes de error sin recargar la página, así que supongo que necesito usar ajax. Intenté escribirlo:

 function validateData(form){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange= function() { if(this.status==200 && this.readyState==4) { document.getElementById("validation").innerHTML = this.responseText; } } xhr.open("POST","/partial/validateData.php"); xhr.send(); }

Entonces, mis preguntas son:

• ¿Uso en formato html onsubmit="validateData(this)" para llegar a ajax?
• ¿Cómo evitar que el formulario vuelva a cargar la página después de enviar? Encontré algunas soluciones en la red, pero todas están en JQuery y necesito Vanilla JS.
• Cómo llegar a esos valores de entrada desde el form en ajax, para poder enviarlos a través xhr.open("POST");

Si hay una forma más fácil de hacerlo, estoy abierto a escuchar, como dije, necesito verificar los datos y, si no es válido, mostrar errores sin recargar la página. Lo siento por la publicación larga y las preguntas, soy nuevo en este concepto.