html5 form submission prevention

by gravof

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<div>Invalidate any input by editing it</div>
<form action="#">
    <label><span>email</span><input type="email" value="[email protected]"></label>
    <label><span>url:</span><input type="url" value="http://example.com"></label>
    <label><span>maxlength 5:</span><input value="123" maxlength="5"></label>
    <label><span>pattern /pattern/:</span><input value="pattern" pattern="pattern"></label>
    <label><span>required</span><input value="required" required></label>
    <label><span>max 1</span><input type="number" value="1" max="1"></label>
    <label><span>min 2</span><input type="number" value="2" min="2"></label>
    <button>submit</button>
</form>

CSS

label {
    display: block;
    margin: 5px 0;
}

span {
    display: inline-block;
    width: 130px;
}

div {
    color: gray;
}

JavaScript

function print(text) {
    $('<p/>').text(text).appendTo('body');
}
var $input = $('input');

if(Modernizr.input.maxlength) {
    print('maxlength supported');
}

if(Modernizr.hasEvent('invalid', $input[0])) {
    print('invalid supported');
}

$input.bind('invalid', function() {
    print('invalid fired');
});

$('form').submit(function() {
    print('form submitted');
    return false;
});

$('button').click();