Arnaldo Capo

Detect if HTML 5 Validation UI is Present

Validating HTML forms a thing for the past? Almost there! My current UI development has been relatively smooth sailing thanks to AngularJS. AngularJS has a way to validate forms but I didn’t used the Angular approach to validate my form. (I probably know what’s going on through your head now!) The reason for it is very simple, it’s dependent on Angular. We’ve all been there, stuck with jQuery or PrototypeJS since it’s burned out in every corner of the code. At some point in the future all browser will have a UI representation for invalid fields, rendering fallbacks obsolete.

I might not want to use Angular for all the different web application so I’m currently exploring ways to tie directives, services and factories that can easily be detached from angular. In theory you can create your own class or objects and attach your methods to your Angular modules in order to keep a very solid Angular ecosystem.

I went ahead and implemented a simple required type=”email” to an input tag to try it out. If you have one of the following browser that natively supports HTML 5 Validation with UI feedback, you can play with the following form.

Desktop Browsers supported: IE 10+, FF 4+, Chrome 10+, and Opera 10+ source



The Challenge!

There is no standard way to detect if a UI notice is present. So I created a test to detect if there’s is some UI  validation presence. The setup right now is to have a fallback; therefore, ended up using Webshims only loading it when needed with Modernizr. I believe the Modernizr is already creating a test for it so either they will have support for it or we can probably do some pull requests helping the community.

The following is a very ALPHA version of a function that returns if there’s some UI notice when there’s invalid fields during submission. Help me test it and evolve it in this newly created git repo. Feel free to put helpful comments and pull requests. https://github.com/cyberdude/capo

var checkHTML5UIValidator = function() {

        var isPresent               = false
            , validationAttributes  = ['max', 'min', 'pattern', 'required']
            , inputs                = [];

          /*---- Let's get all the inputs validation attributes ----*/

          for (var x = 0; x < validationAttributes.length; x++) {
            var newInputs = document.querySelectorAll('input[' + validationAttributes[x] + ']');

            if (newInputs.length < 1)
              continue;

            for (var y = 0; y < newInputs.length; y++) {
              var newInput = newInputs[y];

              if (newInput in inputs)
                continue;

              inputs.push(newInputs[y]);
            }
          } 

          for (var x = 0; x < inputs.length; x++) {
            var input = inputs[x];

            // console.log('Input validation message ' + input.validationMessage);

            if (input.validationMessage !== 'value missing' 
              && input.validationMessage)
              return true;

          }
          return isPresent;
    }