Scrupulous.js - ZaneRay's secret to simple server-side validation

HTML5 Validation made Easy

Feb 18 2014

Here at ZaneRay we've been through a lot of different iterations of form validation. From simple server-side validation, jQuery plugins, to building our own custom validation scripts. We were really excited when the HTML5 spec for web forms came out but often it didn't work how we wanted, didn't work on mobile devices, or the client wanted a custom look. After a bit of experimenting and R&D with the new HTML5 form validation API we decided to create our own validation plugin with an emphasis on tapping as many of HTML5's form features and writing a minimal amount of custom javascript and scrupulous.js was born.

Don't want to read this whole thing? Jump straight to the demo page or GitHub repository.

Why do We Need Another Form Validation Script?

We really liked the simplicity of the HTML5 spec for client-side validation. When a element is required, add a 'required' attribute and it validates. Give an input element a number type and it validates. More often than not, we, or the client, wanted some sort of custom validation. The browser based validation is incredibly hard to customize, or impossible, and it just plain old doesn't work in mobile WebKit. So we tapped the HTML5 form validation API to create custom error messaging based on the spec, that you control with CSS and minimal Javascript.

Getting Started with Scrupulous.js

Programming client-side validation with scrupulous.js is easy. If you know how to write modern HTML forms you are 98% of the way there.

The Markup

Scrupulous.js is written using a Twitter Bootstrap friendly scheme for class names and HTML markup. If your project is based on Bootsrap, it should slip right into your existing forms. If you're not using Bootstrap, that's cool too, you may need to customize some of the CSS.

<form action="/my-results/" method="post" id="validate-form">
  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" class="form-control" id="age" name="age" title="Your Age can only be a number" required>
  </div>
</form>

Notes:

  • Individual inputs must be contained in an element with a class of .form-group
  • All HTML5 validation supported, Example: required, pattern, type attributes
  • An invalid element generates a label element with a class of .error-message that is absolutely positioned in .form-group. Error message is populated with the title attribue from the input element. Read more about HTML5 Constraint Validation.
  • CSS styling is provided in the package as a guide to get you started with scrupulous.js validation. Users of Bootstrap may be able to get by without modifying this at all but we encourage you to make it your own.

For more examples, check out the demo and view source.

The Javascript

Scrupulous.js runs as a jQuery plugin and should be initialized when the DOM is ready.

$(function(){
  $('#validate-form').scrupulous();
});

Scrupulous also supports a valid and invalid method. This is helpful if you need to trigger additional javascript with an invalid or valid form sumission.

$(function(){
  $('.callback-form').scrupulous({
    valid: function(){
      alert('Valid Callback - Submit the Form');
    },
    invalid: function(){
      alert('Invalid Callback -  Stop the Form');
      return false;
    }
  });
});

Check out the Read Me at the GitHub repository

It's a Work in Progress

Scrupulous.js is still in the early stages of development. We are pretty thrilled with ease of use and efficiency in our own projects so we intend to enhance and maintain it. If you find any bugs or improvements feel free to post or contribute via the GitHub Repository, and please, send us examples, and let us now how you're using it.

A Note on Internet Explorer: You knew this was coming. Internet Explorer 8 and older does not support the checkValidity() function which is the cornerstone of scrupulous validation. For this reason the script silently fails if that function does not exist. We recommend using solid server side validation as a backup. There may be some polyfill scripts you could get working but frankly with server-side validation in place, it may not be worth the effort.

-Jeremiah