Newsletter From With Validation | Webdevtrick.com style.css /** code by webdevtrick.com ( https://webdevtrick.com ) **/ * { font-size: 2rem; font-family: 'Righteous', cursive; font-weight: bold; } body { height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #333; } .main { width: 19rem; height: 5rem; padding: 12px; background-color: white; text-align: center; border-radius: 3rem; overflow: hidden; transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .main>#singular-form { position: relative; width: 100%; height: 100%; background-color: white; } .main>#singular-form button { width: 9rem; padding: 0; border: none; outline: none; border-radius: 3rem; cursor: pointer; } .main>#singular-form>button#subs { padding: 0; width: 100%; color: #fbb016; background-color: transparent; z-index: 3; } .main>#singular-form>#email-input { z-index: 2; } .main>#singular-form>#email-input>input { display: inline-block; height: 100%; width: 100%; background-color: white; box-sizing: border-box; border: none; outline: none; padding: 0 26% 0 3%; opacity: 0; transform: scale(0); transition: all .6s ease .4s; } .main>#singular-form>#email-input>button { position: absolute; top: 0; right: 0; height: 100%; background-color: #fbb016; color: white; opacity: 0; transform: scale(0); transition: all .6s ease .4s; } .main>#singular-form>#success { display: flex; justify-content: center; align-items: center; color: #fbb016; font-weight: bold; z-index: 1; } .main>#singular-form>button#subs, .main>#singular-form>#email-input, .main>#singular-form>#success { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(0); opacity: 0; } .main>#singular-form>button#subs { transition: all .6s ease; } .main>#singular-form>#email-input { transform: scale(1); opacity: 1; transition: all .6s ease .4s; } .main>#singular-form>#success { transition: all .2s ease .6s; } .main>#singular-form>button#subs.shown, .main>#singular-form>#email-input.shown, .main>#singular-form>#success.shown, .main>#singular-form>#email-input>button.shown, .main>#singular-form>#email-input>input.shown { transform: scale(1); opacity: 1; } function.js /** code by webdevtrick.com ( https://webdevtrick.com ) **/ var validateEmail = function(elementValue) { var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; return emailPattern.test(elementValue); } $('#email').keyup(function() { var value = $(this).val(); var valid = validateEmail(value); if (!valid) { $(this).css('color', 'red'); $('.addbut1').prop('disabled', true); } else { $(this).css('color', '#2bb673'); $('.addbut1').prop('disabled', false); } }); const newsletter = {}; newsletter.main = document.querySelector('.main'); newsletter.form = document.querySelector('.main > #singular-form'); newsletter.subs = document.querySelector('.main > #singular-form > button#subs'); newsletter.input = document.querySelector('.main>#singular-form>#email-input>input'); newsletter.submitButton = document.querySelector('.main > #singular-form > #email-input > button'); newsletter.successMessage = document.querySelector('.main > #singular-form > #success'); newsletter.submitDelay = 1000; newsletter.clickHandler = (e) => { switch (e.target) { case newsletter.subs: console.log('case subs'); newsletter.main.style.width = '37rem' e.target.classList.remove('shown'); newsletter.input.classList.add('shown'); newsletter.submitButton.classList.add('shown'); newsletter.input.focus(); break; case newsletter.submitButton: newsletter.submitForm(); break; } } newsletter.handleInputKeypress = (e) => { if (e.keyCode === 13) { e.preventDefault(); newsletter.submitForm(); } } newsletter.submitForm = () => { newsletter.input.style.transition = 'all .6s ease'; newsletter.submitButton.style.transition = 'all .6s ease'; newsletter.input.classList.remove('shown'); newsletter.submitButton.classList.remove('shown'); newsletter.main.style.transition = 'all .6s cubic-bezier(0.47, 0.47, 0.27, 1.20) .4s'; newsletter.main.style.width = ''; newsletter.successMessage.classList.add('shown'); let submission = setTimeout(() => newsletter.form.submit(), newsletter.submitDelay); } newsletter.input.addEventListener('keypress', (e) => newsletter.handleInputKeypress(e)); document.addEventListener('click', (e) => newsletter.clickHandler(e));