मैं एक साधारण वेब ऐप बनाने की कोशिश कर रहा हूं। ऐप में एक साधारण HTML इंटरफ़ेस शामिल है:

<form>
  <label for="number">You are welcome to enter a Number:</label>
  <input type="number" id="number" min="1" max="20">

  <button>Submit</button>
</form>

एचटीएमएल से जुड़ी एक स्क्रिप्ट है, जो बटन क्लिक करने पर चलती है। फ़ॉर्म को भेजे जाने और पृष्ठ को पुनः लोड होने से रोकने के लिए मैंने preventDefault() का उपयोग किया। यह इसे काफी अच्छी तरह से रोकता है, लेकिन यह min और max गुणों को होने से भी रोकता है।

मेरी खोज है: क्या किसी घटना की डिफ़ॉल्ट क्रियाओं में से केवल एक (या कुछ) को रोकने का कोई विकल्प है?

0
אלחנן בעל-שם 16 मार्च 2020, 16:55
2
min और max "कार्रवाइयां" नहीं हैं। क्या आप अपने मतलब के बारे में अधिक स्पष्ट हो सकते हैं जब आप कहते हैं "न्यूनतम और अधिकतम गुणों को होने से रोकता है"?
 – 
Woodrow Barlow
16 मार्च 2020, 17:06
3
कृपया हमें स्क्रिप्ट दिखाएं क्योंकि यह आपकी मदद करने के लिए अधिक उपयोगी हो सकती है।
 – 
Federico Moretti
16 मार्च 2020, 17:06
2
यदि आप कुछ जावास्क्रिप्ट शामिल करते हैं तो यह मदद कर सकता है ताकि हम देख सकें कि आपकी स्क्रिप्ट "एचटीएमएल" से "संलग्न" कैसे है। यानी, क्या यह फॉर्म के लिए OnSubmit हैंडलर है, या बटन के लिए OnClick हैंडलर है?
 – 
Woodrow Barlow
16 मार्च 2020, 17:07
<button>Submit</button> है वास्तव में एक सबमिट बटन है। आप जिस पेज से लिंक करते हैं वह ऐसा कहता है।
 – 
Quentin
16 मार्च 2020, 17:10
तुम सही हो, यह मेरी ओर से एक चूक थी। मैंने इसे अपनी टिप्पणी से संपादित किया है।
 – 
Woodrow Barlow
16 मार्च 2020, 17:12

2 जवाब

ब्राउज़र में ईवेंट "चेन" बनाते हैं। यानी, बटन एक "क्लिक" घटना उठाता है, और ब्राउज़र सत्यापन करके उस पर प्रतिक्रिया करता है, जो परिणाम के आधार पर अपनी घटनाओं को उठाता है, जिससे ब्राउज़र सबमिट कार्रवाई करने का कारण बन सकता है, जो फिर से अपनी घटना को बढ़ाता है।

मेरा मानना ​​​​है कि आपने जो किया है वह एक ईवेंट श्रोता को बटन पर ही जोड़ता है और "क्लिक" ईवेंट को रोकता है जो फॉर्म सत्यापन को ट्रिगर करता। साइड-इफ़ेक्ट के रूप में, आपने फ़ॉर्म को सबमिट होने से भी रोका।

दूसरे शब्दों में, आपने केवल एक घटना को "रोका" - लेकिन चूंकि वे एक श्रृंखला में होती हैं, इसलिए आपने शेष श्रृंखला को तोड़ दिया है।

मुझे ऐसा लगता है कि आप जो करना चाहते हैं वह ब्राउज़र के अंतर्निहित फॉर्म सत्यापन व्यवहार (यानी वह हिस्सा जो आपके min और max गुणों को लागू करता है) को सुरक्षित रखता है, लेकिन ब्राउज़र के अंतर्निहित "सबमिट" को रोकता है "कार्यक्षमता (अर्थात वह भाग जिसके कारण पृष्ठ पुनः लोड होता है)।

इसके बजाय आप क्या करना चाहते हैं फॉर्म के "सबमिट" ईवेंट में एक ईवेंट श्रोता जोड़ें। यह सत्यापन के बाद होता है, और आप घटना को "रोक" सकते हैं ताकि ब्राउज़र अपनी सामान्य सबमिट कार्रवाई से न गुजरे। इस तरह, ब्राउज़र अभी भी फॉर्म सत्यापन करता है, और आपका कोड केवल तभी चलता है जब सत्यापन पास हो जाता है।

function onSubmit(event)
{
  event.preventDefault();
  console.log('submit event prevented');
  // do other stuff here
  // this code only runs if form validation passed successfully
}

document.getElementById('form').addEventListener('submit', onSubmit);
<form id="form">
  <label for="number">You are welcome to enter a Number:</label>
  <input type="number" id="number" min="1" max="20">

  <button>Submit</button>
</form>
1
Woodrow Barlow 16 मार्च 2020, 18:22
स्पष्टीकरण और समाधान के लिए धन्यवाद। यह काम किया, धन्यवाद।
 – 
אלחנן בעל-שם
19 मार्च 2020, 11:35
@ אלחנןבעל-שם सुनकर अच्छा लगा। यदि आपको हरे चेकमार्क पर क्लिक करने में कोई आपत्ति नहीं है, तो यह मुझे कुछ बिंदु देता है और भविष्य के लोगों के लिए एक संकेत के रूप में कार्य करता है जो इस प्रश्न को Google खोज में पाते हैं कि यह उत्तर समाधान है।
 – 
Woodrow Barlow
19 मार्च 2020, 16:17

यहाँ विश्वास है कि आप क्या चाहते हैं:

यहां कोड देखें

var submitButton = document.querySelector('button');
submitButton.onclick = function(e) {
  e.preventDefault();
  let data = document.querySelector('#number');

  let min = parseInt(data.getAttribute('min'));
  let max = parseInt(data.getAttribute('max'));
  let number = parseInt(data.value) || false;
  if (number > min &&  number < max) {
    alert("validation passed");
  }
}
0
Dijo Mathews 16 मार्च 2020, 19:39
मूल पोस्ट में कुछ अस्पष्टता है, लेकिन मुझे नहीं लगता कि लेखक यही ढूंढ रहा है। मेरा मानना ​​है कि वे ब्राउज़र के अंतर्निर्मित प्रपत्र सत्यापन को बनाए रखने का प्रयास कर रहे हैं, लेकिन ब्राउज़र के अंतर्निर्मित "सबमिट" व्यवहार को ओवरराइड कर सकते हैं।
 – 
Woodrow Barlow
16 मार्च 2020, 17:43