HTML Form Validation Attributes:
HTML5 introduced several form validation attributes that browsers can use to validate input fields without the need for JavaScript. These attributes include required, pattern, min, max, type, etc.
Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>
<button type="submit">Submit</button>
</form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>
<button type="submit">Submit</button>
</form>
In this example:
- The required attribute ensures that the input field must be filled out before submitting the form.
- The type="email" attribute specifies that the input must be a valid email address.
- The minlength="8" attribute specifies that the password must be at least 8 characters long.
JavaScript Form Validation:
While HTML form validation attributes are helpful, JavaScript provides more control and customization options for validating form data. You can use JavaScript to perform custom validation logic, display error messages, and handle form submission events.
Example:
<form onsubmit="return validateForm()">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<span id="ageError" style="color: red;"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var age = document.getElementById("age").value;
var ageError = document.getElementById("ageError");
if (age < 18) {
ageError.textContent = "Age must be 18 or older.";
return false;
} else {
ageError.textContent = "";
return true;
}
}
</script>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<span id="ageError" style="color: red;"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var age = document.getElementById("age").value;
var ageError = document.getElementById("ageError");
if (age < 18) {
ageError.textContent = "Age must be 18 or older.";
return false;
} else {
ageError.textContent = "";
return true;
}
}
</script>
In this example:
- The onsubmit attribute of the form element calls the validateForm() function when the form is submitted.
- The validateForm() function retrieves the value of the age input field and checks if it's less than 18.
- If the age is less than 18, an error message is displayed, and the form submission is prevented by returning false.
- Combining HTML and JavaScript Validation:
- You can combine HTML form validation attributes with JavaScript validation for enhanced validation capabilities and cross-browser compatibility.
Example:
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<span id="usernameError" style="color: red;"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var usernameError = document.getElementById("usernameError");
if (username.length < 5) {
usernameError.textContent = "Username must be at least 5 characters long.";
return false;
} else {
usernameError.textContent = "";
return true;
}
}
</script>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<span id="usernameError" style="color: red;"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var usernameError = document.getElementById("usernameError");
if (username.length < 5) {
usernameError.textContent = "Username must be at least 5 characters long.";
return false;
} else {
usernameError.textContent = "";
return true;
}
}
</script>
Practice Excercise Practice now