CODEWITHSUNDEEP
javascript
Jake
Jake

Reputation: 4255

How to get the reason for validity failure when using .checkValidity()

When I use .checkValidity() on an input element and it returns false, how do I get the reason for failure?

I know I could use the ValidityState interface and do checks for each possible failure, however those only return a boolean value.

With the default browser's validity check implementation, it provides the user with a string that explains the validity check failure.

For example, if you were to use:

<input type="email" />

And the user submits the form with [email protected], it would provide the user with a tooltip that reads '.' is used at a wrong position in '@.domain.com'.

I'm creating my own form validation implementation as I don't like the styling and behaviour of the browser's default tooltip, and obviously it would be much better UX if I could provide the user with the same sort of validation message instead of simply using something generic like "The email you entered is not valid".

Upvotes: 1

Views: 1438

Answers (2)

Badri Chorapalli
Badri Chorapalli

Reputation: 99

Here I am providing sample code for your test. Please use this sample code as reference.

<!DOCTYPE html>
<html>
<head>
    <title>Tool Tip</title>
    <style>
        /* Tooltip container */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* If you want dots under the hoverable text */
        }

        /* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            max-width: 300px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 3px;

            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: -150%;
            left: 50%;
            margin-left: -60px;
            width: 400px;
            word-wrap: nowrap;
            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* Tooltip arrow */
        .tooltip .tooltiptext::before {
            content: "";
            position: absolute;
            top: -15%;
            right: 50%;

            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #555;

        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="tooltip">
        <input type="email" id="myemail" />
        <div class="tooltiptext" id=validationMessage>Please enter valid Email</div>
    </div>
</body>
<script>
    var myemail = document.getElementById("myemail");
    myemail.oninput = function () {
    document.getElementById("validationMessage").innerHTML = myemail.validationMessage;
    }
    myemail.onchange = myemail.oninput;
</script>
</html>

Upvotes: 0

Srinivasan Sekar
Srinivasan Sekar

Reputation: 2119

Hi you can use validationMessage property of element

validationMessage : Contains the message a browser will display when the validity is false.

After calling checkValidity() then retrieve validationMessage property of the element.

var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  }

Upvotes: 3

Related Questions