The outcome I want:
<div class="Email">
<input type="text" name="" class="em" placeholder="Email Address">
</div>
<div class="button" > <h2 class="re"> Request Access </h2> </div>
</div>
I don't know where to start from JavaScript code. Any tips will help.
Use regex to validate things like emails, passwords, usernames, etc. It's really powerful and can do a ton.
Solution:
<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>