Browser Form Validation

by John Allan

HTML

<form id="userinfo" novalidate>
<fieldset>
  <div>
    <input type="text" name="FirstName" required autocomplete="off" oninvalid="setCustomValidity(' ')">
    <div class="invalid">this field is required</div>
  </div>
</fieldset>
<button type="submit">
Save
</button>
</form>

CSS

.invalid { display: none; }
.validate input:invalid + .invalid { display: block; }

JavaScript

const form = document.getElementById('userinfo');

form.addEventListener('submit', (e) => {
	e.preventDefault();
  form.classList.add('validate');
  
  if (!form.querySelectorAll(':invalid').length) {
  	alert('submit!')
  }
	
})