0
211
VistasSubscription button with data validation
What the script does is hide the input element and show the "thanks message".
But prior to this I need it to validate if input emailfield is validated, and show the "thanks message" only if that happens.
Thanks!
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 Respuestas
Responde la pregunta0
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
}
});
Instead of this regexp you can use any that you want
·
Juan Pablo Isaza
Denunciar
Responde la pregunta