0
218
ViewsBotón de suscripción con validación de datos
Lo que hace el script es ocultar el elemento de entrada y mostrar el "mensaje de agradecimiento". Pero antes de esto, lo necesito para validar si el campo de emailfield de entrada está validado y mostrar el "mensaje de agradecimiento" solo si eso sucede. ¡Gracias!
var nextStep = document.querySelector('#nextStep'); nextStep.addEventListener('click', function(e) { e.preventDefault() // Hide first view document.getElementById('my_form').style.display = 'none'; // Show thank you message element document.getElementById('thank_you').style.display = 'block'; }); <form class="row row-cols-lg-auto g-2 align-items-center justify-content-end"> <div class="col-12" id="my_form"> <input id="emailfield" type="email" class="form-control" placeholder="Ingresa tu Email" required="required"> </div> <div class="col-12" id="thank_you" style="display: none;"> Gracias por subscribirse! </div> <div class="col-12"> <button type="submit" class="btn btn-primary-soft m-0" name="subscribirse" id="nextStep">Subscribirse</button> </div> </form> 
·
Juan Pablo Isaza
1 answers
Answer question0
var nextStep = document.querySelector('#nextStep'); nextStep.addEventListener('click', function (e) { e.preventDefault() let inputEmail = document.querySelector('#emailfield') if (/.*\@.*\..*/.test(inputEmail.value)) { // validation passed // Hide first view document.getElementById('my_form').style.display = 'none'; // Show thank you message element document.getElementById('thank_you').style.display = 'block'; } else { // validation not passed } });En lugar de esta expresión regular, puede usar cualquiera que desee
·
Juan Pablo Isaza
Report
Answer question