Uso javascript para validar la entrada de mi formulario y funciona bien, pero el formulario aún se envía cuando los errores no se corrigen.
¿Cómo evito el envío de formularios hasta que el usuario haga las correcciones?
Ejemplo de código a continuación;
$('.validate').hide(); $('body').on('blur', '#phone', function() { $('.validate').hide(); isphone($(this).val()); }); function isphone(phone) { if (phone === "1234" || phone === "23456") { $(".validate").show(); } else { $(".validate").hide(); } } <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="submitForm"> <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" /> <div class="validate"><span style="color: red;"><b>Phone in use!</b></span></div> <button href='/' type='submit' id="submitForm">Process</button> </form>Para escribir una respuesta útil, hice una pequeña refactorización, reescribiendo isphone para que sea una función de validación reutilizable que solo devuelve true o false . También lo renombré. Ahora podemos reutilizar la lógica de validación en diferentes lugares.
los elementos de form emiten un evento de submit justo antes de que realmente se envíen. Debemos escuchar el evento sumbit , y si la validación falla, podemos return false , lo que cancelará el evento y, por lo tanto, evitará el envío del formulario.
$('.validate').hide(); $('body').on('blur', '#phone', function() { var value = $(this).val(); if (isPhoneInUse(value)) { $(".validate").show(); } else { $(".validate").hide(); } }); $('#submitForm').on('submit', function(e) { var value = $("#phone").val(); if (isPhoneInUse(value)) { // validation failed. cancel the event console.log("not submitting"); return false; } }) function isPhoneInUse(phone) { return (phone === "1234" || phone === "23456") } <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="submitForm"> <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" /> <div class="validate"><span style="color: red;"><b>Phone in use!</b></span></div> <button href='/' type='submit' id="submitForm">Process</button> </form>