HTML oninvalid Event Attribute

HTMLWeb DevelopmentFront End Technology

The HTML oninvalid event attribute is triggered when an input field is invalid while submitting the form in an HTML document.

Syntax

Following is the syntax −

<tagname oninvalid=”script”></tagname>

Example

Let us see an example of HTML oninvalid event Attribute −

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
   }
   textarea {
      border: 2px solid #fff;
      background: transparent;
      font-size: 1rem;
   }
   ::placeholder {
      color: #000;
      font-size: 1rem;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
</head>
<body>
<h1>HTML oninvalid Event Attribute Demo</h1>
<form action="" method="">
<textarea placeholder="Enter your message here" oninvalid="invalidFn()" rows='8' cols="50" required></textarea>
<input type="submit" value="SUBMIT" class="btn">
</form>
<p>Click on SUBMIT button without writing any message</p>
<script>
   function invalidFn() {
      document.querySelector('textarea').style.background = '#db133a6e';
      document.querySelector('textarea').setAttribute('placeholder', 'Please enter a message');
   }
</script>
</body>
</html>

Output

Click on “SUBMIT” button without entering any message in the text area and observe how oninvalid attribute works −

raja
Published on 24-Sep-2019 12:27:28
Advertisements