El resultado que quiero:
<div class="Email"> <input type="text" name="" class="em" placeholder="Email Address"> </div> <div class="button" > <h2 class="re"> Request Access </h2> </div> </div>No sé por dónde empezar desde el código JavaScript. Cualquier consejo ayudará.
Use expresiones regulares para validar cosas como correos electrónicos, contraseñas, nombres de usuario, etc. Es realmente poderoso y puede hacer mucho.
Solución:
<form class="email"> <input type="email" class="emailInput" placeholder="Email Address" /> <button type="submit">Request Access</button> <p id="error" style="color: red; display: none">Please enter a valid email</p> </form> <script> const email = document.querySelector('.emailInput'); const submit = document.querySelector('button'); const error = document.querySelector('#error'); const showError = () => { error.style.display = 'block'; }; submit.addEventListener('click', (e) => { e.preventDefault(); if (!email.value.match(/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/)) { return showError(); } console.log('success'); }); </script>