As mentioned earlier, one notable browser that does not support the Constraint Validation API is Apple’s Safari browser. Should you need to support Safari, you can use a library, or polyfill, that simulates the API for browsers that do not implement it.

One library that will provide Constraint Validation in Safari is the Webshims Lib, which you can download from github.com/​aFarkas/​webshim.

Actually, the Webshims library can act as a polyfill for many, many features. Setting it up and using it is straightforward. (However, it does do a lot of different things, and it is easy to get lost in the documentation.)

Here is how you use it with CoffeeRun so that Safari works with your Validation module. First, download a zip file from the project page: github.com/​aFarkas/​webshim/​releases/​latest. Unzip the file and put the js-webshim/webshim folder in your coffeerun directory (next to index.html and your scripts folder).

Add a <script> tag in index.html for the webshim/polyfiller.js file.

...
      </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"
      charset="utf-8"></script>
    <script src="webshim/polyfiller.js" charset="utf-8"></script>
    <script src="scripts/validation.js" charset="utf-8"></script>
    <script src="scripts/checklist.js" charset="utf-8"></script>
    <script src="scripts/formhandler.js" charset="utf-8"></script>
    <script src="scripts/datastore.js" charset="utf-8"></script>
    <script src="scripts/truck.js" charset="utf-8"></script>
    <script src="scripts/main.js" charset="utf-8"></script>
  </body>
</html>

Then, add these lines to main.js:

...
  var Validation = App.Validation;
  var CheckList = App.CheckList;
  var webshim = window.webshim;
  var myTruck = new Truck('ncc-1701', new DataStore());

  ...

  formHandler.addInputHandler(Validation.isCompanyEmail);

  webshim.polyfill('forms forms-ext');
  webshim.setOptions('forms', { addValidators: true, lazyCustomMessages: true });

}(window));

This imports the webshim library and then configures it for use with forms.

Finally, there is one quirk with the library that you need to know. Anywhere you use setCustomValidity, you must wrap the objects with jQuery. For CoffeeRun, you need to wrap the event.target objects of the addInputHandler function in formhandler.js:

...
  FormHandler.prototype.addInputHandler = function (fn) {
    console.log('Setting input handler for form');
    this.$formElement.on('input', '[name="emailAddress"]', function (event) {
      var emailAddress = event.target.value;
      var message = '';
      if (fn(emailAddress)) {
        $(event.target).setCustomValidity('');
      } else {
        message = emailAddress + ' is not an authorized email address!'
        $(event.target).setCustomValidity(message);
      }
    });
  };
...

The authors of Webshim chose to implement the polyfill functionality entirely as an extension of jQuery. Other than this wrapping, you do not need to modify your code.

After you save your changes, you can test your validation in Safari. You should see that it also reports an issue if you forget to fill out the coffee order or if you enter an invalid email address (Figure 12.8).

Figure 12.8  Using Webshim as a Safari polyfill

Webshim goes well beyond providing form validation. You should browse through the documentation to see what else it can do for you on your projects.