blob: 71e428a6010b039501e795c9500c6a66837f60e6 [file] [log] [blame]
<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<form>
Required text input: <input type="text" required><input id="required_text_input_submit" type="submit">
</form>
<form>
Required checkbox input: <input type="checkbox" required><input id="required_checkbox_submit" type="submit">
</form>
<form>
Required radio input: <input type="radio" name="myradiogroup1" required><br>
Required radio input: <input type="radio" name="myradiogroup1">
<input id="required_radio_submit" type="submit">
</form>
<form>
Required file input: <input type="file" required><input id="required_file_submit" type="submit">
</form>
<form>
Required email input: <input type="email" value="invalid" required><input id="required_email_submit" type="submit">
</form>
<form>
Required url input: <input type="url" value="invalid" required><input id="required_url_submit" type="submit">
</form>
<form>
Required input with pattern: <input type="text" value="1" pattern="[a-z]" required><input id="input_with_pattern_submit" type="submit">
</form>
<form>
Required input with minlength=100: <input type="text" minlength=100 id="field_with_minlength" required><input id="input_with_minlength_submit" type="submit">
</form>
<form>
Required range with min=5: <input type="number" value="1" min=5 required><input id="range_with_min_submit" type="submit">
</form>
<form>
Required range with max=5: <input type="number" value="10" max=5 required><input id="range_with_max_submit" type="submit">
</form>
<form>
Required range with step=3 / min=0: <input type="number" value="10" min=0 step=3 required><input id="range_with_step_submit" type="submit">
</form>
<div id="description"></div>
<div id="console"></div>
<script>
description("Tests the HTML form validation messages being shown on UI side.");
jsTestIsAsync = true;
function getValidationBubbleContents()
{
return `
(function() {
uiController.uiScriptComplete(JSON.stringify(uiController.contentsOfUserInterfaceItem('validationBubble')));
})();`
}
var tests = [
['required_text_input_submit', 'Fill out this field'],
['required_checkbox_submit', 'Select this checkbox'],
['required_radio_submit', 'Select one of these options'],
['required_file_submit', 'Select a file'],
['required_email_submit', 'Enter an email address'],
['required_url_submit', 'Enter a URL'],
['input_with_pattern_submit', 'Match the requested format'],
['input_with_minlength_submit', 'Use at least 100 characters'],
['range_with_min_submit', 'Value must be greater than or equal to 5'],
['range_with_max_submit', 'Value must be less than or equal to 5'],
['range_with_step_submit', 'Enter a valid value'],
];
var currentTestIndex = -1;
function runNextTest()
{
++currentTestIndex;
if (currentTestIndex >= tests.length) {
finishJSTest();
return;
}
var currentTest = tests[currentTestIndex];
var submitButton = document.getElementById(currentTest[0]);
expectedMessage = currentTest[1];
submitButton.click();
testRunner.runUIScript(getValidationBubbleContents(), function(result) {
validationBubbleContents = JSON.parse(result).validationBubble;
shouldBeEqualToString("validationBubbleContents.message", "" + expectedMessage);
runNextTest();
});
}
function setup()
{
var field = document.getElementById("field_with_minlength");
field.focus();
eventSender.keyDown("Z");
}
onload = function() {
setup();
setTimeout(function() {
runNextTest();
}, 0);
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
<html>