interactive validation test case

by gravof

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

JavaScript

var supported = (function() {
    // Assuption No.1
    if (!Modernizr.input.required) {
        return false;
    }

    var form = document.createElement('form');

    // Prevent form from being submitted
    form.onsubmit = function(e) {
        e.preventDefault();
    }

    // Calling form.submit() doesn't trigger interactive validation, 
    // use a submit button instead
    form.innerHTML = '<input 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'
    document.body.appendChild(form);

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

    // Record whether "invalid" event is fired
    var invaildFired = false;
    input.oninvalid = function() {
        invaildFired = true;
    };

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

    // Don't forget to remove form from the DOM tree
    document.body.removeChild(form);

    return invaildFired;
})();

document.body.innerHTML = supported