Mi javascript valida dos campos en mi formulario asegurándose de que la entrada del usuario coincida con los valores en mi javascript antes de que se les permita continuar con su registro o enviar el formulario.
Sin embargo, cuando proporcionan valores incorrectos, reciben una alerta que les dice que los valores no coinciden. Además, cuando proporcionan los valores correctos, también reciben una alerta para continuar con su registro.
Noté que aparece el cuadro de alerta para notificar a los usuarios una vez que completan el primer campo y también aparece cuando se completa el segundo campo.
¿Existe algún medio posible para ocultar la alerta hasta que el usuario complete ambos campos antes de que aparezca la alerta para notificar al usuario si sus entradas son correctas o incorrectas?
Cualquier ayuda será realmente apreciada.
A continuación están mis códigos;
$('.validate').hide(); $('#phone, #email').on('change', function() { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { $(".validate").show(); } else { alert ("Phone or Email do not match!\nYou cannot submit this form!"); $(".validate").hide(); } }); $('#theForm').on('submit', function(e) { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { // validation failed. cancel the event console.log("not submitting"); e.preventDefault(); return false; } }) function isDataInUse(phone, email) { return (phone === "1234" && email === "1234@gmail.com") } <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="theForm"> <div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div> <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" /> <br/><br/> <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" /> <br/><br/> <div class="validate"> <button href='/' type='submit' id="submitForm">Submit</button> </div> </form>Consulte la posible solución a continuación.
$('.validate').hide(); $('#phone, #email').on('change', function() { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { $(".validate").show(); } else { if(phone.trim().length > 0 && email.trim().length > 0) { alert ("Phone or Email do not match!\nYou cannot submit this form!"); } $(".validate").hide(); } }); $('#theForm').on('submit', function(e) { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { // validation failed. cancel the event console.log("not submitting"); e.preventDefault(); return false; } }) function isDataInUse(phone, email) { return (phone === "1234" && email === "1234@gmail.com") }Consulte también JSFiddle para jugar: https://jsfiddle.net/jamdevgirl/gmeny6j1/9/
Dado que la validación se produce en el evento de cambio, que se activa cuando la entrada pierde el foco, no necesita demorarse, sino solo verificar que ambas entradas estén completas antes de la validación.
Puede hacerlo convirtiendo el bloque else en un bloque if else y verificando que los valores de los campos de email y phone tengan una longitud.
$('.validate').hide(); $('#phone, #email').on('change', function() { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { $(".validate").show(); } else if (phone.length && email.length && !isDataInUse(phone, email)) { alert ("Phone or Email do not match!\nYou cannot submit this form!"); $(".validate").hide(); } }); $('#theForm').on('submit', function(e) { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { // validation failed. cancel the event console.log("not submitting"); e.preventDefault(); return false; } }) function isDataInUse(phone, email) { return (phone === "1234" && email === "1234@gmail.com") } <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="theForm"> <div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div> <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" /> <br/><br/> <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" /> <br/><br/> <div class="validate"> <button href='/' type='submit' id="submitForm">Submit</button> </div> </form>