как используя onClick оставить валидацию полей (text, email)?

var form = document.querySelector('form') 
 
form.addEventListener('submit', function(e) { 
  // Не посылает на сервер 
  e.preventDefault(); 
  //---------------------------------------------------------------- 
  // Проверка mail 
  var mail = document.querySelector('.mail'); 
  var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$/; 
 
  if (re.test(mail.value)) { // Если прошел 
    console.log('Passes'); 
  } else{ 
   console.error('You shall not pass!'); 
  } 
  //---------------------------------------------------------------- 
  // Так же можете проверять и text 
})

<form action=""> 
  <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" class="mail"> 
  <input type="submit"> 
</form>