backport of 3b9fc13 / #1060

Modernizr · Apr 29, 2014 · 9baf562 · 9baf562
1 parent 535405e
commit 9baf562
Showing 1 changed file with 35 additions and 56 deletions.
diff --git a/feature-detects/forms-validation.js b/feature-detects/forms-validation.js
@@ -7,77 +7,56 @@
 (function(document, Modernizr){
 
 
-Modernizr.formvalidationapi = false;
-Modernizr.formvalidationmessage = false;
+  Modernizr.formvalidationapi = false;
+  Modernizr.formvalidationmessage = false;
 
-Modernizr.addTest('formvalidation', function(){
-    var form = document.createElement('form');
-    if ( !('checkValidity' in form) ) {
-        return false;
+  Modernizr.addTest('formvalidation', function() {
+    var form = createElement('form');
+    if ( !('checkValidity' in form) || !('addEventListener' in form) ) {
+      return false;
     }
-    var body = document.body,
-
-    html = document.documentElement,
-
-    bodyFaked = false,
-
-    invaildFired = false,
-
-    input;
+    if ('reportValidity' in form) {
+      return true;
+    }
+    var invalidFired = false;
+    var input;
 
-    Modernizr.formvalidationapi = true;
+    Modernizr.formvalidationapi =  true;
 
     // Prevent form from being submitted
-    form.onsubmit = function(e) {
-        //Opera does not validate form, if submit is prevented
-        if ( !window.opera ) {
-            e.preventDefault();
-        }
-        e.stopPropagation();
-    };
+    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, 
+    // 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>';
 
-    // FF4 doesn't trigger "invalid" event if form is not in the DOM tree
-    // Chrome throws error if invalid input is not visible when submitting 
-    form.style.position = 'absolute';
-    form.style.top = '-99999em';
-
-    // We might in <head> in which case we need to create body manually
-    if ( !body ) {
-        bodyFaked = true;
-        body = document.createElement('body');
-        //avoid crashing IE8, if background image is used
-        body.style.background = "";
-        html.appendChild(body);
-    }
-
-    body.appendChild(form);
+    testStyles('#modernizr form{position:absolute;top:-99999em}', function( node ) {
+      node.appendChild(form);
 
-    input = form.getElementsByTagName('input')[0];	
+      input = form.getElementsByTagName('input')[0];
 
-    // Record whether "invalid" event is fired
-    input.oninvalid = function(e) {
-        invaildFired = true;
+      // Record whether "invalid" event is fired
+      input.addEventListener('invalid', function(e) {
+        invalidFired = true;
         e.preventDefault();
         e.stopPropagation();
-    };
-
-    //Opera does not fully support the validationMessage property
-    Modernizr.formvalidationmessage = !!input.validationMessage;
-
-    // Submit form by clicking submit button
-    form.getElementsByTagName('button')[0].click();
+      }, false);
 
-    // Don't forget to clean up
-    body.removeChild(form);
-    bodyFaked && html.removeChild(body);
+      //Opera does not fully support the validationMessage property
+      Modernizr.formvalidationmessage = !!input.validationMessage;
 
-    return invaildFired;
-});
+      // Submit form by clicking submit button
+      form.getElementsByTagName('button')[0].click();
+    });
 
+    return invalidFired;
+  });
 
-})(document, window.Modernizr);
+})(document, window.Modernizr);