HTML novalidate एट्रिब्यूट: फॉर्म वैलिडेशन बायपास करें

HTML novalidate एट्रिब्यूट एक बूलियन एट्रिब्यूट है जो <form> एलिमेंट पर लगाया जाता है। जब यह मौजूद होता है, तो फॉर्म सबमिट करते समय ब्राउज़र की अंतर्निहित HTML5 वैलिडेशन (required, pattern, type, min/max, आदि) छोड़ दी जाती है। यह कस्टम वैलिडेशन लॉजिक लागू करने या सर्वर-साइड वैलिडेशन पर भरोसा करने के लिए उपयोगी है।

सिंटैक्स (Syntax)

<form novalidate></form>

या JavaScript के माध्यम से:

formElement.setAttribute('novalidate', 'true');

formElement.noValidate = true;

उदाहरण (Example)

यह उदाहरण दर्शाता है कि कैसे novalidate एट्रिब्यूट फॉर्म वैलिडेशन को अक्षम करता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    input[type='text'] {
      width: 300px;
      padding: 12px 16px;
      border: 2px solid #fff;
      background: transparent;
      border-radius: 20px;
      display: block;
      margin: 1rem auto;
      outline: none;
      font-size: 1rem;
    }
    input[type='text']:focus {
      border-color: #db133a;
      box-shadow: 0 0 0 3px rgba(219, 19, 58, 0.2);
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover {
      background: #b01030;
    }
    .btn.secondary {
      background: #2274A5;
      margin-top: 0.5rem;
    }
    .btn.secondary:hover {
      background: #1a5d85;
    }
    ::placeholder {
      color: #666;
    }
    .show {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1rem;
      min-height: 60px;
    }
    .validation-message {
      color: #f87171;
      background: rgba(248, 113, 113, 0.2);
      padding: 0.5rem;
      border-radius: 8px;
      margin: 0.5rem auto;
      max-width: 330px;
    }
  </style>
</head>
<body>
  <h1>HTML novalidate एट्रिब्यूट डेमो</h1>
  
  <form id="demoForm">
    <input type="text" name="username" placeholder="अपना नाम दर्ज करें (आवश्यक)" required>
    <input type="submit" value="सबमिट करें" class="btn">
  </form>
  
  <button type="button" class="btn secondary" onclick="toggleNovalidate()">
    <span id="toggleText">नो-वैलिडेशन सक्षम करें</span>
  </button>
  
  <div class="show" id="statusDisplay"></div>

  <script>
    const form = document.getElementById('demoForm');
    const statusDisplay = document.getElementById('statusDisplay');
    const toggleText = document.getElementById('toggleText');
    let novalidateEnabled = false;
    
    // फॉर्म सबमिट इवेंट
    form.addEventListener('submit', function(e) {
      e.preventDefault(); // वास्तविक सबमिशन रोकें
      const input = form.querySelector('input[name="username"]');
      
      if (form.noValidate) {
        statusDisplay.innerHTML = `
          <p style="color: #4ade80;">✓ फॉर्म सबमिट हो गया (novalidate सक्रिय)</p>
          <p>दर्ज किया गया: <strong>${input.value || '(खाली)'}</strong></p>
        `;
      } else {
        // ब्राउज़र वैलिडेशन स्वचालित रूप से चलेगा
        if (!input.value.trim()) {
          statusDisplay.innerHTML = '<p class="validation-message">⚠ ब्राउज़र वैलिडेशन: कृपया नाम दर्ज करें।</p>';
          input.reportValidity(); // ब्राउज़र का डिफ़ॉल्ट UI दिखाएं
        } else {
          statusDisplay.innerHTML = `
            <p style="color: #4ade80;">✓ फॉर्म सबमिट हो गया (वैलिडेशन पास)</p>
            <p>दर्ज किया गया: <strong>${input.value}</strong></p>
          `;
        }
      }
    });
    
    function toggleNovalidate() {
      novalidateEnabled = !novalidateEnabled;
      form.noValidate = novalidateEnabled;
      toggleText.textContent = novalidateEnabled ? 'नो-वैलिडेशन अक्षम करें' : 'नो-वैलिडेशन सक्षम करें';
      
      statusDisplay.innerHTML = `
        <p>novalidate एट्रिब्यूट: <strong>${novalidateEnabled ? 'सक्षम' : 'अक्षम'}</strong></p>
        <p><small>अब नाम के बिना सबमिट करने का प्रयास करें।</small></p>
      `;
    }
  </script>
</body>
</html>

आउटपुट (Output)

प्रारंभ में, खाली फील्ड के साथ सबमिट करने पर ब्राउज़र वैलिडेशन चेतावनी दिखाता है:

"नो-वैलिडेशन सक्षम करें" बटन पर क्लिक करने के बाद, फॉर्म बिना वैलिडेशन के सबमिट हो जाता है:

खाली सबमिशन सफल:

महत्वपूर्ण बिंदु

कब उपयोग करें

• कस्टम वैलिडेशन: जब आप JavaScript के साथ अपनी वैलिडेशन लॉजिक लागू करना चाहते हैं।
• बहु-चरण फॉर्म: मध्यवर्ती चरणों में वैलिडेशन छोड़ने के लिए।
• सर्वर-साइड वैलिडेशन: जब आप केवल सर्वर पर वैलिडेशन पर भरोसा करते हैं।
• प्रगतिशील वृद्धि: JavaScript-सक्षम ब्राउज़र के लिए कस्टम UI, फॉलबैक के लिए नेटिव।

कब न उपयोग करें

• सरल फॉर्म जहां नेटिव वैलिडेशन पर्याप्त है।
• जब आप उपयोगकर्ता को तत्काल दृश्य प्रतिक्रिया देना चाहते हैं (नेटिव UI प्रदान करता है)।
• सुरक्षा-महत्वपूर्ण डेटा के लिए केवल क्लाइंट-साइड वैलिडेशन पर भरोसा न करें।

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़र (Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+)।

संबंधित एट्रिब्यूट्स

• required - फील्ड अनिवार्य बनाता है
• pattern - रेगुलर एक्सप्रेशन वैलिडेशन
• min/max/step - संख्या/दिनांक सीमाएं
• type - ईमेल, यूआरएल, नंबर आदि के लिए अंतर्निहित वैलिडेशन
• formnovalidate - विशिष्ट सबमिट बटन पर लागू (बटन एट्रिब्यूट)