W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML oninvalid Attribute Example</title>
    <meta charset="utf-8" />
    <style>
        input[type="submit"] {
            width: 150px;
            height: 50px;
            background-color: #2e3e4e;
            font-size: 14pt;
            color: white;
            border-radius: 5px;
            margin-left: 140px;
        }

input[type="submit"]:hover {
            background-color: #1d2d3d;
            color: white;
        }

input[type="text"]{
            width: 230px;
            height: 30px;
            background-color: #efffff;
            font-size: 14pt;
            color: #000;
            border-radius: 5px;
            margin: 5px;
        }

input[type="text"]:hover{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <h2>HTML oninvalid Attribute Example</h2>
    <p>Submit the button with empty textfield to trigger oninvalid event.</p>
   <form>
        Name: <input type="text" required oninvalid="myFunction()"><br>
        <input type="submit" value="Submit" id="button">
   </form>
   <script>
        function myFunction() {
         alert("Name filed can not be empty.");
        }
   </script>
</body>
</html>