'How can I create a custom message when an HTML5 required input pattern does not pass?

I have the following:

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

When I enter just one character I get a message saying:

"Please match the requested format"

Is there a way I can customize this message to say something like "Please enter at least 5 characters"

html


Solution 1:[1]

You can do a quick and dirty way with this trick:

<form>  
 <label for="username">Username:</label><br/>
  <input id="username" type="text" pattern=".{6,}" autofocus required title="Please enter at least 5 characters">        
  <input id="submit" type="submit" value="create">   
</form>

Solution 2:[2]

I'd add another attribute oninvalid.

oninvalid="setCustomValidity('Please enter at least 5 characters')"

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" oninvalid="setCustomValidity('Please enter at least 5 characters')"/>

Solution 3:[3]

I found that, chrome at least, adds to the message the title of the input automatically, so no extra js is required, see this:

enter image description here

the input looks like this:

<input type="text" title="Number with max 3 decimals" pattern="^\d+(\.\d{1,3})?$">

Solution 4:[4]

It is very simple without javascript or jQuery validation. We can achieve it by HTML5

Let suppose we have HTML field:

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

Just change the HTML as

<input required pattern=".{6,}" class="big medium-margin" title="Please enter at least 5 characters." name="Password" placeholder="Password" size="25" type="password" />

If you observe, just add title = "Error message"

Now whenever form will be post, the given messages will be appeared and we did not need JavaScript or jQuery check. This solution works for me.

Solution 5:[5]

You'd need to use the setCustomValidity function. The problem with this is that it'd only guarantee a custom message for users who have JavaScript enabled.

<input required pattern=".{6,}" ... oninput="check(this)">
                                    ^^^^^^^^^^^^^^^^^^^^^

function check (input) {
    if (input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0) {
        // Input is fine. Reset error message.
        input.setCustomValidity('');
    } else {
        input.setCustomValidity('Your custom message here.');
    }
}

Solution 6:[6]

I simply use oninvalid to set the custom validty error message and then use onchange to reset the message so the form can submit.

<input type="number" oninvalid="this.setCustomValidity('Please enter an INTEGER')" onchange="this.setCustomValidity('')" name="integer-only" value="0" min="0" step="1">

Solution 7:[7]

https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/

    <input id="gfg" type="number" min="101" max="999" required> 

    <button onclick="myFunction()">Try it</button> 


    <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 trinalbadger587
Solution 2
Solution 3 santiago arizti
Solution 4 rajausman haider
Solution 5 federico-t
Solution 6 jsherk
Solution 7 Shahab Ghannadzadeh

Related Questions