How to set custom validation message for HTML input on mouseenter?

Question

I have an ASP.NET Core project and I'm trying to set custom text for the validation tooltip for the HTML form input field. By default, it shows "Please fill out this field". I tried to add event listeners for input, change and mouseenter events like this.

<!DOCTYPE html>
<html>
<body>
    <form>
        <label for="field1">Field1:</label>
        <input id="field1" type="text" class="validate" data-error-message="You must fill in field1!" required
               oninput="this.setCustomValidity('');this.reportValidity()" onchange="validateInputElement(this)" onmouseenter="validateInputElement(this)" />
        <label for="field2">Field1:</label>
        <input id="field2" type="text" class="validate" data-error-message="You forgot to fill in field2!" required
               oninput="this.setCustomValidity('');this.reportValidity()" onchange="validateInputElement(this)" onmouseenter="validateInputElement(this)" />
    </form>
    <script>
        function validateInputElement(element)
        {
            let validationMessage = "";
            if(element.validity !== ValidityState.valid)
            {
                validationMessage = element.dataset["errorMessage"];
            }
            else if(document.querySelector("input#field1")?.value === document.querySelector("input#field2")?.value)
            {
                validationMessage = "You must enter different values!"
            }
            element.setCustomValidity(validationMessage);
            element.reportValidity();
        }
    </script>
</body>
</html>

In this case, my custom validation messages are displayed, but the default validation messages are also displayed. How to disable default validation messages?

Solved

by adding form attribute "novalidate" and change validation function code from

if(element.validity !== ValidityState.valid)

to

if(!element.validity.valid)

The resulting code snippet is

<!DOCTYPE html>
<html>
<body>
    <form novalidate>
        <label for="field1">Field1:</label>
        <input id="field1" type="text" class="validate" data-error-message="You must fill in field1!" required
               oninput="this.setCustomValidity('');this.reportValidity()" onchange="validateInputElement(this)" onmouseenter="validateInputElement(this)" />
        <label for="field2">Field1:</label>
        <input id="field2" type="text" class="validate" data-error-message="You forgot to fill in field2!" required
               oninput="this.setCustomValidity('');this.reportValidity()" onchange="validateInputElement(this)" onmouseenter="validateInputElement(this)" />
    </form>
    <script>
        function validateInputElement(element)
        {
            let validationMessage = "";
            if(!element.validity.valid)
            {
                validationMessage = element.dataset["errorMessage"];
            }
            else if(document.querySelector("input#field1")?.value === document.querySelector("input#field2")?.value)
            {
                validationMessage = "You must enter different values!"
            }
            element.setCustomValidity(validationMessage);
            element.reportValidity();
        }
    </script>
</body>
</html>

But I also want that invalid field is not automatically receive focus on moseenter.

Modified

to remove focus from invalid input field onmouseleave and also to hide validation message after timeout expired.
Resulting code snippet:

<!DOCTYPE html>
<html>
<body>
    <form novalidate>
        <label for="field1">Field1:</label>
        <input id="field1" type="text" class="validate" data-error-message="You must fill in field1!" required />
        <label for="field2">Field1:</label>
        <input id="field2" type="text" class="validate" data-error-message="You forgot to fill in field2!" required />
    </form>
    <script>
        let validMsgTimeouts = {};
        function validateInputElement(element)
        {
            let validationMessage = "";
            if(!element.validity.valid || document.querySelector("input#field1")?.value?.trim() === document.querySelector("input#field2")?.value?.trim())
            {
                validationMessage = element.dataset["errorMessage"];
            }
            element.setCustomValidity(validationMessage);
            element.reportValidity();
            if(validationMessage?.trim()?.length > 0)
            {
                validMsgTimeouts[element.id] = setTimeout(function()
                {
                    element.setCustomValidity(" ");
                    element.reportValidity();
                    if(validMsgTimeouts[element.id] > 0)
                    {
                        clearTimeout(validMsgTimeouts[element.id]);
                    }
                }, 1000);
            }
        }
        let nodeList = document.querySelectorAll("input.validate");
        for(curElem of nodeList)
        {
            curElem.addEventListener("input", function(event) 
            {
                event.target.setCustomValidity("");
                event.target.reportValidity();
            });
            curElem.addEventListener("change", function(event) 
            {
                validateInputElement(event.target);
            });
            curElem.addEventListener("mouseenter", function(event)
            {
                validateInputElement(event.target);
            });
            curElem.addEventListener("mouseleave", function(event)
            {
                let activeElement = document.activeElement;
                if(activeElement === event.target && activeElement.validationMessage?.trim()?.length > 0)
                {
                    if(validMsgTimeouts[event.target.id] > 0)
                    {
                        clearTimeout(validMsgTimeouts[event.target.id]);
                    }
                    activeElement.blur();
                }
            });
        }
    </script>
</body>
</html>

Yair I · Accepted Answer · 2025-07-14 21:37:16Z

1

If I understand your question I assume you want to remove the browser validation that show tooltip with the text "Please fill out this field".

In this case you just need to add the "novalidate" attribute to the form.

<!DOCTYPE html>
<html>
<body>
    <form novalidate>
        <label for="field1">Field1:</label>
        <input id="field1" type="text" class="validate" data-error-message="You must fill in field1!" required
               oninput="this.setCustomValidity('');this.reportValidity()" onchange="validateInputElement(this)" onmouseenter="validateInputElement(this)" />
        <label for="field2">Field1:</label>
        <input id="field2" type="text" class="validate" data-error-message="You forgot to fill in field2!" required
               oninput="this.setCustomValidity('');this.reportValidity()" onchange="validateInputElement(this)" onmouseenter="validateInputElement(this)" />
    </form>
    <script>
        function validateInputElement(element)
        {
            let validationMessage = "";
            if(element.validity !== ValidityState.valid)
            {
                validationMessage = element.dataset["errorMessage"];
            }
            else if(document.querySelector("input#field1")?.value === document.querySelector("input#field2")?.value)
            {
                validationMessage = "You must enter different values!"
            }
            element.setCustomValidity(validationMessage);
            element.reportValidity();
        }
    </script>
</body>
</html>

answered Jul 14 at 21:37

Yair I

1,1581 gold badge6 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stanislav Panferov Jul 15 at 12:38

Ok. The "novalidate" attribute disables default validation messages. But validation doesn't work after the field changes. If the field becomes valid, the error message is still displayed. How to correctly remove / display validation messages on field changed?

S.Will · Accepted Answer · 2025-07-14 21:34:09Z

1

Change your if statement to

 if(element.validity.valid)
            {
                validationMessage = element.dataset["errorMessage"];
            }

You're checking an object, you want to check the property value of valid on validity

source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity

answered Jul 14 at 21:34

S.Will

4106 silver badges14 bronze badges

1 Comment

Stanislav Panferov Jul 15 at 12:53

Your answer solved my second problem with displaying / remove validation messages after a field is changed.

chrwahl · Accepted Answer · 2025-08-23 19:45:47Z

1

If you would like your custom massage to show up as a tooltip when the mouse hover the input, you can use the title attribute. This is obviously not the same as the message showing when the input is invalidated.

<form name="form01">
  <label for="field1">Field1:</label>
  <input id="field1" name="field1" type="text" class="validate"
    title="You must fill in field1!" required>
  <label for="field2">Field2:</label>
  <input id="field2" name="field2" type="text" class="validate"
    title="You forgot to fill in field2!" required>
</form>

answered Aug 23 at 19:45

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to set custom validation message for HTML input on mouseenter?

Solved

Modified

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solved

Modified

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related