Every web page resides inside a browser window which can be considered as an
object.
A Document object represents the HTML document that is displayed in that window.
The Document object has various properties that refer to other objects which allow
access to and modification of document content.
The way a document content is accessed and modified is called the Document
Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical
structure applies to the organization of objects in a Web document.
Window object − Top of the hierarchy. It is the outmost element of the object
hierarchy.
Document object − Each HTML document that gets loaded into a window
becomes a document object. The document contains the contents of the
page.
Form object − Everything enclosed in the <form>...</form> tags sets the
form object.
Form control elements − The form object contains all the elements defined
for that object such as text fields, buttons, radio buttons, and checkboxes.
Here is a simple hierarchy of a few important objects −
There are several DOMs in existence. The following sections explain each of these
DOMs in detail and describe how you can use them to access and modify document
content.
The Legacy DOM − This is the model which was introduced in early versions
of JavaScript language. It is well supported by all browsers, but allows
access only to certain key portions of documents, such as forms, form
elements, and images.
The W3C DOM − This document object model allows access and
modification of all document content and is standardized by the World Wide
Web Consortium (W3C). This model is supported by almost all the modern
browsers.
The IE4 DOM − This document object model was introduced in Version 4 of
Microsoft's Internet Explorer browser. IE 5 and later versions include support
for most basic W3C DOM features.
DOM compatibility
If you want to write a script with the flexibility to use either W3C DOM or IE 4 DOM
depending on their availability, then you can use a capability-testing approach that
first checks for the existence of a method or property to determine whether the
browser has the capability you desire. For example −
if ([Link]) {
// If the W3C method exists, use it
} else if ([Link]) {
// If the all[] array exists, use it
} else {
// Otherwise use the legacy DOM
}
JavaScript Form Validation
HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns
false, to prevent the form from being submitted:
JavaScript Example
function validateForm() {
var x = [Link]["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
The function can be called when the form is submitted:
HTML Form Example
<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = [Link]["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
USING JAVASCRIPT TO VALIDATE INPUT 1 TO 10 NUMBERS
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = [Link]("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
[Link]("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript Validation API
❮ PreviousNext ❯
Constraint Validation DOM Methods
Property Description
checkValidity() Returns true if an input element contains valid data.
setCustomValidity() Sets the validationMessage property of an input element.
If an input field contains invalid data, display a message:
The checkValidity() Method
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = [Link]("id1");
if (![Link]()) {
[Link]("demo").innerHTML =
[Link];
}
}
</script>
Try it Yourself »
Constraint Validation DOM Properties
Property Description
validity Contains boolean properties related to the validity of an input
validationMessage Contains the message a browser will display when the validity
willValidate Indicates if an input element will be validated.
Validity Properties
The validity property of an input element contains a number of properties
related to the validity of data:
Property Description
customError Set to true, if a custom validity message is set.
patternMismatch Set to true, if an element's value does not match its pattern a
rangeOverflow Set to true, if an element's value is greater than its max attri
rangeUnderflow Set to true, if an element's value is less than its min attribute
stepMismatch Set to true, if an element's value is invalid per its step attribu
tooLong Set to true, if an element's value exceeds its maxLength attri
typeMismatch Set to true, if an element's value is invalid per its type attribu
valueMissing Set to true, if an element (with a required attribute) has no v
valid Set to true, if an element's value is valid.
Examples
If the number in an input field is greater than 100 (the input's max attribute),
display a message:
The rangeOverflow Property
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if ([Link]("id1").[Link]) {
txt = "Value too large";
}
[Link]("demo").innerHTML = txt;
}
</script>
<html>
<body>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if ([Link]("id1").[Link]) {
txt = "Value too small";
} else {
txt = "Input OK";
[Link]("demo").innerHTML = txt;
</script>
</body>
</html>
