add ie10 support to form validation

[patrickkettner]

fixes #1057
fixes #957 as well

This is how microsoft demos it (go to New DOM Properties and Events)

They are just adding an onclick handler to the submit button, that runs checkValidity() on each input element.

for (var i = 0; i < form.elements.length; i++) { 
  if (!form.elements[i].checkValidity()) {
    formValidity = false;
  }
}

[patrickkettner]

ping @ryanseddon @stucox

[patrickkettner]

[stucox]

We’ve already checked if 'checkValidity' in form – does IE10 only expose it on input?

Also, would the event handler on line 49 get fired synchronously, in order to be picked up below? Wouldn’t it be fired on next tick?

[aFarkas]

You really don't have to change anything here. The current test works as expected. I fixed this bug some time ago and all bug reports do test with the old code. This is the current buggy part:

    input.oninvalid = function(e) {
        invaildFired = true;
        e.preventDefault();
        e.stopPropagation();
    };

and this is the fixed one:

    input.addEventListener('invalid', function(e) {
      invaildFired = true;
      e.preventDefault();
      e.stopPropagation();
    }, false);

The change by @patrickkettner would give us a false positive in Safari. But we could improve it to something like this:

Modernizr.addTest('formvalidation', function() {
  var form = createElement('form');
  if ( !('checkValidity' in form) || !('addEventListener' in form) ) {
    return false;
  } else if ( ('reportValidity' in form) ) {
    return true;
  }

  var invalidFired = false;
  var input;

  Modernizr.formvalidationapi =  true;

  // Prevent form from being submitted
  form.addEventListener('submit', function(e) {
    //Opera does not validate form, if submit is prevented
    if ( !window.opera ) {
      e.preventDefault();
    }
    e.stopPropagation();
  }, false);

  // Calling form.submit() doesn't trigger interactive validation,
  // use a submit button instead
  //older opera browsers need a name attribute
  form.innerHTML = '<input name="modTest" required><button></button>';

  testStyles('#modernizr form{position:absolute;top:-99999em}', function( node ) {
    node.appendChild(form);

    input = form.getElementsByTagName('input')[0];

    // Record whether "invalid" event is fired
    input.addEventListener('invalid', function(e) {
      invalidFired = true;alert('fds')
      e.preventDefault();
      e.stopPropagation();
    }, false);

    //Opera does not fully support the validationMessage property
    Modernizr.formvalidationmessage = !!input.validationMessage;

    // Submit form by clicking submit button
    form.getElementsByTagName('button')[0].click();
  });

  return invalidFired;
});

[aFarkas]

@stucox
The checkValidity is supported on both input and form in all browser.

The invalid event is indeed fired synchronously. The spec simply says fire a simple event named invalid... instead of queue a task that fires/queue an event....

The invalid event is also implemented by all browsers synchronously, including IE10 as long as you use addEventListener instead of an event handler.

[stucox]

Cheers for clarifying. How does 'reportValidity' in form guarantee support?

I feel we probably don’t need to change this, just leave it as it is. @patrickkettner?

[aFarkas]

The only difference between reportValidity and checkValidity is, that reportValidity is for additionally showing the validation UI (interactive form validation vs. programmatic form validation) and this is exactly, what this test trys to detect (using the submit button click). If a browser has implemented this method, we can reasonable assume, that there is some validation UI, otherwise this method has no sense.

I also fixed the typo in invalidFired.

[stucox]

Ok, @patrickkettner – fancy updating your PR to match Alexander’s code above?

[patrickkettner]

you know it

[patrickkettner]

updated.

I assume the alert('fds') isn't needed :]

[stucox]

Could you correct the typo? That script uses the variable invaildFired instead of invalidFired all the way through.

[patrickkettner]

done

[stucox]

👍