amit08255/html5-form-validations.md

## html5-form-validations.md

      
    Raw
  

              html5-form-validations.md
            
          
    HTML5 Form Validation Tricks

Disable submit button if any input HTML5 validations failed

form.validated-forms:invalid {
  button[type="submit"]:not(:disabled) {
    opacity: 0.5;
    pointer-events: none;
  }
}
Check if input HTML5 validations passed on change

inputElement.checkValidity() returns true when HTML5 validations passed.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
      <form>
        <input type="email" onchange="myFunction(this)">
      </form>

<script>
function myFunction(e) {
  console.log(e.checkValidity());
}
</script>
  </body>
</html>