Form required attribute with a custom validation message in HTML5

The creation of web forms has perpetually been a fancy task. whereas marking up the shape itself is simple, checking whether or not every field features a valid and coherent price is tougher, and informing the user concerning the matter might become a headache. HTML5 introduced new mechanisms for forms. There 2 kinds of Constraint Validation DOM Methods which are checkValidity() & setCustomValidity(). Let’s know more about them.

checkValidity() method

We first use the checkValidity() method to check if the input fields contain valid data and run checkValidity() on form submit in order to validate all form fields. If a minimum of one is invalid, the validation fails. By using the checkValidity() method, we validate each of the input element on blur event or each of the select element on change event. This allows the user to know if a selected field is valid or invalid at a given time, and makes it attainable to convey the user feedback promptly.



Syntax:

input="this.checkValidity()"

This is going to return true if an input element contains valid data.

Example: This example shows how to do HTML form required attribute along with setting custom validation message.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
  
<head>
    <title>Form required Attribute | With message validation</title>
</head>
  
<body>
  
    <body style="text-align:center;">
  
        <h1 style="color:green">GeeksforGeeks</h1>
  
        <p>Enter a number and click the button:</p>
  
        <input id="gfg" type="number" min="101" max="999" required>
  
        <button onclick="myFunction()">Try it</button>
  
        <p>An message will display of ERROR, if the number
           is lesser than 101 or greater than 999</p>
        <p id="geeks"></p>
  
        <script>
            function myFunction() {
                var inpObj = document.getElementById("gfg");
                if (!inpObj.checkValidity()) {
                    document.getElementById("geeks")
                              .innerHTML = inpObj.validationMessage;
                } else {
                    document.getElementById("geeks")
                              .innerHTML = "Input is ALL RIGHT";
                }
            }
        </script>
  
    </body>
  
</html>

chevron_right


    Output:

  • When we load the code:
    ngcut
  • When we leave the field blank and click the button:
    ngcut
  • When you enter an invalid value:
    ngcut
  • When you enter a valid value:
    ngcut

setCustomValidity()

In an input element, it is used to set the validationMessage property. It is really very easy to control a custom validation message in an HTML5 form. Let us find out how.

Syntax:

input="this.setCustomValidity()"

This part is of utmost importance, as it will hide the error message when the user will enter the new data.

Example: This example shows how to do HTML form required attribute along with setting custom validation message.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
  
<head>
    <title>Form required Attribute | With custom message validation
    </title>
</head>
  
<body>
    <center>
  
        <h1 style="color:green">GeeksforGeeks</h1>
  
        <form id="myform">
            <p>Enter an Email Id:</p>
            <input id="email" oninvalid="InvalidMsg(this);" 
                   oninput="InvalidMsg(this);" name="email" 
                   type="email" required="required" />
            <input type="submit" />
        </form>
    </center>
  
    <script>
        function InvalidMsg(textbox) {
  
            if (textbox.value === '') {
                textbox.setCustomValidity
                      ('Entering an email-id is necessary!');
            } else if (textbox.validity.typeMismatch) {
                textbox.setCustomValidity
                      ('Please enter an email address which is valid!');
            } else {
                textbox.setCustomValidity('');
            }
  
            return true;
        }
    </script>
  
</body>
  
</html>

chevron_right


    Output:

  • When we load the code:
    ngcut
  • When we leave the field blank and click the button:
    ngcut
  • When you enter an invalid Email Id:
    ngcut