HTML oninvalid इवेंट एट्रिब्यूट

विवरण

HTML oninvalid इवेंट एट्रिब्यूट HTML दस्तावेज़ में फॉर्म सबमिट करते समय इनपुट फील्ड अमान्य होने पर ट्रिगर होता है।

सिंटैक्स

<tagname oninvalid="script"></tagname>

उदाहरण

आइए HTML oninvalid इवेंट एट्रिब्यूट का एक उदाहरण देखें:

<!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 इवेंट एट्रिब्यूट डेमो</h1> 
<form action="" method=""> 
  <textarea placeholder="अपना संदेश यहां दर्ज करें" oninvalid="invalidFn()" rows='8' cols="50" required></textarea> 
  <input type="submit" value="SUBMIT" class="btn"> 
</form> 
<p>कोई संदेश लिखे बिना SUBMIT बटन पर क्लिक करें</p> 
<script> 
  function invalidFn() { 
    document.querySelector('textarea').style.background = '#db133a6e'; 
    document.querySelector('textarea').setAttribute('placeholder', 'कृपया एक संदेश दर्ज करें'); 
  } 
</script> </body> </html>

आउटपुट

HTML oninvalid इवेंट एट्रिब्यूट

टेक्स्ट एरिया में कोई संदेश दर्ज किए बिना "SUBMIT" बटन पर क्लिक करें और देखें कि oninvalid एट्रिब्यूट कैसे काम करता है:

HTML oninvalid इवेंट एट्रिब्यूट