Skip to content

Instantly share code, notes, and snippets.

@btaitelb

btaitelb/checkValidity.html

Created January 18, 2012 21:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save btaitelb/1635665 to your computer and use it in GitHub Desktop.
Save btaitelb/1635665 to your computer and use it in GitHub Desktop.
Download ZIP
QUnit Test for webshims checkValidity
Raw
checkValidity.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Test Suite</title>
<link rel="stylesheet" href="qunit/qunit.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="qunit/qunit.js"></script>
<script src="../src/extras/modernizr-custom.js"></script>
<script src="../src/polyfiller.js"></script>
<script src="../src/extras/custom-validity.js"></script>
<script>
(function($){
$.webshims.ready('forms forms-ext', start);
$.webshims.ready('dom-support', function(){
QUnit.reset = function(){
$("#main, #qunit-fixture").htmlPolyfill( QUnit.config.fixture );
};
});
module("init");
asyncTest("init", function(){
$.webshims.setOptions({
'forms-ext' : { replaceUI: false},
'forms' : { customMessages: true, replaceValidationUI: true }
});
$.webshims.polyfill('forms forms-ext DOM');
});
module("checkValidity");
test("required input", function() {
var input = $("#testrequiredinput");
ok(input.prop("required"), "is required");
input.val("");
ok(!input.checkValidity(), "is not valid");
input.val("something");
ok(input.checkValidity(), "is valid");
});
asyncTest("patterned input", function() {
QUnit.reset();
$.webshims.ready('forms forms-ext', function() {
var input = $("#testpatterninput");
ok(input.attr("data-partial-pattern"), "has pattern");
input.val("abcde");
//ok(!input.prop('validity').valid, "is not valid");
ok(!input.checkValidity(), "is not valid");
input.val("12345");
//ok(input.prop('validity').valid, "is valid");
ok(input.checkValidity(), "is valid");
$.webshims.ready('forms DOM', function(){
start();
});
});
});
asyncTest("maxlength input", function() {
QUnit.reset();
$.webshims.ready('forms forms-ext', function() {
var input = $("#testmaxlengthinput");
ok(input.attr("maxlength"), "has maxlength");
input.val("abcdefg");
ok(!input.prop('validity').valid, "is not valid");
ok(input.prop('validity').tooLong, "is too long");
ok(!input.checkValidity(), "is not valid");
input.val("12345");
ok(input.checkValidity(), "is valid");
$.webshims.ready('forms DOM', function(){
start();
});
});
});
test("minlength input", function() {
var input = $("#testminlengthinput");
ok(input.attr("data-minlength"), "has minlength");
input.val('123');
//ok(!input.prop('validity').valid, "is not valid");
ok(!input.checkValidity(), "is not valid");
input.val('12345');
//ok(input.prop('validity').valid, "is valid");
ok(input.checkValidity(), "is valid");
});
})(jQuery);
</script>
<style type="text/css">
html { border: 0; }
#qunit-fixture {
position: static;
left: auto;
top: auto;
}
</style>
</head>
<body class="flora">
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<form id="testform">
<input id="testrequiredinput" type="text" required="required" />
<input id="testpatterninput" type="text" data-partial-pattern="\d{5}"/>
<input id="testmaxlengthinput" type="text" maxlength="5"/>
<input id="testminlengthinput" type="text" data-minlength="5"/>
<input type="submit" />
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment