HTML5 Form Validation Fallback (without a library)

HTML5 Form Validation Fallback.markdown

A Pen by Ash Blue

A Pen by Ash Blue on CodePen.

License.

index.html

<h1>Cross Browser HTML5 Validation</h1>
<p>Works in the latest version of all browsers. <strong>Note</strong> Codepen iframes may cause issues with validation messages showing.</p>
<form class="validate-form">
  <input type="text" 
         title="required input" 
         placeholder="required" 
         required />
  <input type="text" 
         title="Must be 5 numeric numbers" 
         placeholder="zip code" 
         pattern="\d{5}"
         maxlength="5"
         required />
  <input type="submit" />
</form>
<p>Status: <span id="status">Unsubmitted</span></p>

script.js

function hasHtml5Validation () {
  return typeof document.createElement('input').checkValidity === 'function';
}

if (hasHtml5Validation()) {
  $('.validate-form').submit(function (e) {
    if (!this.checkValidity()) {
      e.preventDefault();
      $(this).addClass('invalid');
      $('#status').html('invalid');
    } else {
      $(this).addClass('valid');
      $('#status').html('submitted');
    }
  });
}

style.css

.invalid input:required:invalid {
    background: #BE4C54;
}

.invalid input:required:valid {
    background: #17D654 ;
}

input {
  display: block;
  margin-bottom: 10px;
}