<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/common.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("Test for validationMessage DOM property.");
if (window.internals)
internals.runtimeFlags.langAttributeAwareFormControlUIEnabled = true;
var form = document.createElement("form");
document.body.appendChild(form);
// An input element with a pattern set and a mismatched value
var patternInput = document.createElement("input");
patternInput.name = "patternInput";
patternInput.pattern = "lorem ipsum";
patternInput.value = "lorem";
form.appendChild(patternInput);
debug("input patternMismatch: " + patternInput.validationMessage);
// A required input with an empty value
var requiredInput = document.createElement("input");
requiredInput.name = "requiredInput";
requiredInput.required = true;
form.appendChild(requiredInput);
debug("input valueMissing: " + requiredInput.validationMessage);
// A required textarea with an empty value
var requiredTextArea = document.createElement("textarea");
requiredTextArea.name = "requiredTextArea";
requiredTextArea.required = true;
form.appendChild(requiredTextArea);
debug("textarea valueMissing: " + requiredTextArea.validationMessage);
// A required select with an empty value
var requiredSelect = document.createElement("select");
requiredSelect.name = "requiredSelect";
requiredSelect.required = true;
form.appendChild(requiredSelect);
debug("select valueMissing: " + requiredSelect.validationMessage);
// A type=email input for the "type mismatch" flag
var emailInput = document.createElement("input");
emailInput.name = "emailInput";
emailInput.type = "email";
form.appendChild(emailInput);
emailInput.value = "incorrectValue";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "@xn--fsq.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@example*.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user\uD83D\[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user\[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "[email protected].";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.multiple = true;
emailInput.value = "[email protected],,[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = ",[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "[email protected],";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "[email protected],[email protected]";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
var numberInput = document.createElement("input");
numberInput.type = "number";
form.appendChild(numberInput);
numberInput.focus();
document.execCommand("InsertText", false, "+++");
debug("input badInput: " + numberInput.validationMessage);
var nonRequiredBadInputMessage = numberInput.validationMessage;
debug("badInput and valueMissing:");
numberInput.required = true;
shouldBe("numberInput.validationMessage", "nonRequiredBadInputMessage");
debug("stepMismatch:");
numberInput.min = "0";
numberInput.step = "0.1";
numberInput.value = "0.11";
debug("input stepMismatch: " + numberInput.validationMessage);
numberInput.value = "0.19";
debug("input stepMismatch: " + numberInput.validationMessage);
numberInput.max = "10.02";
numberInput.value = "10.01";
debug("input stepMismatch: " + numberInput.validationMessage);
debug("rangeOverflow and rangeUnderflow:");
numberInput.min = "1"
numberInput.max = "1";
numberInput.value = "2";
debug("input rangeOverflow and rangeUnderflow: " + numberInput.validationMessage);
numberInput.value = "-2";
debug("input rangeOverflow and rangeUnderflow: " + numberInput.validationMessage);
var dateInput = document.createElement("input");
dateInput.type = "date";
form.appendChild(dateInput);
dateInput.required = true;
dateInput.min = "2000-01-02"
dateInput.max = "2000-01-02";
dateInput.value = "2000-01-03";
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
numberInput.value = "1999-01-02";
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
dateInput.type = "datetime-local"
dateInput.min = "2000-01-02T00:00"
dateInput.max = "2000-01-02T00:00"
dateInput.value = "2000-01-02T10:00"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
numberInput.value = "2000-01-01T00:00"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
dateInput.type = "month"
dateInput.min = "2000-01"
dateInput.max = "2000-01"
dateInput.value = "2000-02"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
numberInput.value = "1999-01"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
dateInput.type = "week"
dateInput.min = "2000-W01"
dateInput.max = "2000-W01"
dateInput.value = "2000-W02"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
numberInput.value = "1999-W01"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
dateInput.type = "time"
dateInput.min = "07:00"
dateInput.max = "07:00"
dateInput.value = "08:00"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
numberInput.value = "06:00"
debug("input rangeOverflow and rangeUnderflow: " + dateInput.validationMessage);
debug("tooLong:");
var inputWithMax = document.createElement("input");
inputWithMax.maxLength = 3;
inputWithMax.value = "abcdef";
document.body.appendChild(inputWithMax);
inputWithMax.focus();
eventSender.keyDown("Backspace");
debug("input tooLong: " + inputWithMax.validationMessage);
// fancyX should be treated as 3 characters.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = "x\u0305\u0332";
inputWithMax.maxLength = 2;
inputWithMax.value = fancyX + "X";
inputWithMax.focus();
inputWithMax.setSelectionRange(4, 4);
eventSender.keyDown("Backspace");
debug("input tooLong: " + inputWithMax.validationMessage);
// The following test might show English text + Arabic digits. It's expected and
// it never happens in products.
inputWithMax.lang = "ar-eg";
debug("input tooLong: " + inputWithMax.validationMessage);
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.focus();
sendString("a\nbc");
textarea.maxLength = 3;
debug("textarea tooLong: " + textarea.validationMessage);
debug("tooShort:");
var inputWithMin = document.createElement("input");
inputWithMin.minLength = 3;
inputWithMin.value = "ab";
document.body.appendChild(inputWithMin);
inputWithMin.focus();
eventSender.keyDown("Backspace");
debug("input tooShort: " + inputWithMin.validationMessage);
// fancyX should be treated as 3 characters.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = "x\u0305\u0332";
inputWithMin.minLength = 4;
inputWithMin.value = fancyX + "X";
inputWithMin.focus();
inputWithMin.setSelectionRange(4, 4);
eventSender.keyDown("Backspace");
debug("input tooShort: " + inputWithMin.validationMessage);
// The following test might show English text + Arabic digits. It's expected and
// it never happens in products.
inputWithMin.lang = "ar-eg";
debug("input tooShort: " + inputWithMin.validationMessage);
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.focus();
sendString("a\n");
textarea.minLength = 4;
debug("textarea tooShort: " + textarea.validationMessage);
// A button can't be valited and, thus, has a blank validationMessage
var but = document.createElement("button");
but.name = "button";
form.appendChild(but);
shouldBe("but.validationMessage", "''");
// An input control with no name, so it can't be validated (willValidate = false)
var anoninput = document.createElement("input");
form.appendChild(anoninput);
shouldBe("anoninput.validationMessage", "''")
// Fieldsets can't be validated
var happyFieldset = document.createElement("fieldset");
happyFieldset.name = "fieldset";
form.appendChild(happyFieldset);
shouldBe("happyFieldset.validationMessage", "''");
// Select controls can't be validated too
var happySelect = document.createElement("select");
happySelect.name = "select";
form.appendChild(happySelect);
shouldBe("happySelect.validationMessage", "''");
// Output elements can't be validated
var happyOutput = document.createElement("output");
happySelect.name = "output";
form.appendChild(happyOutput);
shouldBe("happyOutput.validationMessage", "''");
// Object elements can't be validated
var happyObject = document.createElement("object");
happySelect.name = "object";
form.appendChild(happyObject);
shouldBe("happyObject.validationMessage", "''");
form.remove();
</script>
</body>
</html>
Codebase Browser
chromium