Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Form required attribute with a custom validation message in HTML5
HTML5 includes a number of built-in form validation features that allow developers to easily add validation to their forms. One of these features is the "required" attribute, which specifies that an input field is required and must be filled out before the form can be submitted.
The “required” attribute is a boolean attribute. If any input field with the “required” attribute is present in the form, then this field must be completed before submitting the form.
If that particular field is left blank before submitting the form, the user will see an error message from the browser informing them that the input field is necessary.
Using the "required" Attribute
To use the "required" attribute, simply add the attribute to the input field that you want to make required −
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required>
</form>
</body>
</html>
The browser will verify that the input field has been filled out before submitting the form, and if it hasn't, it will display an error message. Depending on the browser, the default error message may differ, but it typically states that the field is necessary.
Customizing the Validation Message
We can also change the message for the invalid input by specifying a unique message which will be sent to the user when the field is invalid. We can change the default validation message using the "title" attribute −
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" required title="Please enter your name">
</form>
</body>
</html>
This code will display the message "Please enter your name" to the user if the input field is left empty when the form is submitted.
To specify a regular expression that the input must match whenever we fill the form, HTML5 offers the "pattern" element in addition to the "title" attribute, allowing programmers to specify a regular expression that the input must match in order to be accepted. The user will see an error notice from the browser if the input does not follow the required pattern
Example
Here is an example of how to use the "pattern" attribute to specify a minimum length for an input field −
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
</form>
</body>
</html>
If the input does not meet this criteria, the message "Please enter at least 3 characters" will be displayed. This code requires the input field to include at least 3 characters.
Customizing the Error Message Style
Using CSS, the error message's look can be altered. The error message is by default added as a small text node to the input field and is written in a red font. However, we may modify the error message's appearance and exert control over how it is shown using CSS.
The ":invalid" pseudo-class can be used to select the input field when it is invalid and CSS properties can be used to alter the error message's style.
Example
Here is an example of how to customize the error message style using CSS −
<html>
<style>
input:invalid {
border: 2px solid red;
}
input:invalid + span {
color: red;
font-weight: bold;
}
</style>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
</form>
</body>
</html>
When an input field is invalid, this code will turn its border red and display an error message that is bold and red.
Customizing the Error Message Using JavaScript
We can also use JavaScript to customize the error message, in addition to using CSS, and control how it is displayed.
To customize the error message using JavaScript, we can use the "setCustomValidity" method, which allows us to specify a custom error message for the input field.
Example
Here is an example of how to use the "setCustomValidity" method to set a custom error message −
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="InputField" type="text" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
const txt = document.getElementById("InputField").value;
console.log(txt);
const txtLen = txt.length;
console.log(txtLen);
if (txtLen<3) {
document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
</html>
This code will set the error message for the input field to "Please enter a valid value."
Conclusion
In this post, we looked at how to combine a personalised validation message with the HTML5 "needed" element. We have discussed the fundamentals of form validation, the "needed" tag, and how to utilise JavaScript and CSS to personalise the validation message.
Developers may quickly add form validation to their HTML5 forms and make sure the user has provided the necessary information by utilising the "needed" element and customising the validation message. Many web applications depend on form validation since it is a crucial tool for guaranteeing the accuracy and integrity of user input.
14K+ Views
