var f = document.querySelector('form'); var d = document.querySelector('div'); var i = document.querySelector('input[required]'); f.addEventListener('submit', function(e){ //checkValidity returns a boolean if (this.checkValidity()){ f.style.backgroundColor = 'green'; alert('woooo'); e.preventDefault(); } else { f.style.backgroundColor = 'red'; alert(i.getAttribute('title')); e.preventDefault(); } });
<form> <div> <label>Email: <input name=email type=email required title="enter your email"> </label> <input type=submit> </div> </form>