JavaScript Forms
JavaScript Form Validation
HTML form validation can be performed using JavaScript. If a form field (e.g., fname) is empty, the following function will display an alert message and return false to prevent the form from being submitted:
JavaScript Example
function validateForm()
{ let x = document.forms["myForm"]["fname"].value;
if (x == "")
{ alert("Name must be filled out"); return false; }}
This 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>
JavaScript Can Validate Numeric Input
JavaScript is often used to validate numeric input. For example:
"Please input a number between 1 and 10."
<form onsubmit="return validateNumber()">
<input type="number" name="num" min="1" max="10" required>
<input type="submit" value="Submit">
</form>
Automatic HTML Form Validation
HTML form validation can be automatically handled by the browser. If a form field is required (e.g., fname), the required attribute prevents the form from being submitted if the field is empty:
HTML Form Example
<form action="/action_page.php" method="post"> <input type="text" name="fname" required> <input type="submit" value="Submit"></form>
Note: Automatic HTML form validation does not work in Internet Explorer 9 or earlier versions.
Data Validation
Data validation ensures that user input is clean, correct, and useful. Typical validation tasks include:
- Ensuring all required fields are filled.
- Validating date input.
- Ensuring numeric fields contain numbers.
Data validation aims to ensure correct user input and can be performed on the server side (by a web server after input submission) or client side (by a web browser before input submission).
HTML Constraint Validation
HTML5 introduced a new validation concept called constraint validation. This validation is based on:
- Constraint Validation HTML Input Attributes
- Constraint Validation CSS Pseudo Selectors
- Constraint Validation DOM Properties and Methods
Constraint Validation HTML Input Attributes
Attribute
Description
disabled
Specifies that the input element should be disabled
max
Specifies the maximum value of an input element
min
Specifies the minimum value of an input element
pattern
Specifies the value pattern of an input element
required
Specifies that the input field requires a value
type
Specifies the type of an input element
For a full list, refer to HTML Input Attributes.
Constraint Validation CSS Pseudo Selectors
Selector
Description
:disabled
Selects input elements with the "disabled" attribute specified
:invalid
Selects input elements with invalid values
:optional
Selects input elements with no "required" attribute specified
:required
Selects input elements with the "required" attribute specified
:valid
Selects input elements with valid values
Test Yourself With Exercises
Exercise:
Use the HTML DOM to change the value of an image's src attribute.
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src = "pic_mountain.jpg";
</script>
