एचटीएमएल 5 के साथ मिलान करने के लिए क्या आपको दो फॉर्म फ़ील्ड की आवश्यकता हो सकती है?

Question

HTML5 का उपयोग करके मिलान करने के लिए दो फॉर्म फ़ील्ड में प्रविष्टियों की आवश्यकता का एक तरीका है? या यह अभी भी जावास्क्रिप्ट के साथ किया जाना है? उदाहरण के लिए, यदि आपके पास दो पासवर्ड फ़ील्ड हैं और यह सुनिश्चित करना चाहते हैं कि उपयोगकर्ता ने प्रत्येक फ़ील्ड में एक ही डेटा दर्ज किया है, तो क्या इसे प्राप्त करने के लिए कुछ विशेषताएँ, या अन्य कोडिंग की जा सकती हैं?

Comments

खैर, यह एक अच्छी बात है। हालाँकि, मैं HTML5 को लागू करने में सक्षम होना चाहूंगा, अगर यह मौजूद है।

— user981178

HTML5 में मेल खाते रेगेक्स पैटर्न से मुझे जो समस्या हुई है, वह यह है कि किसी विशेष वर्ण का मिलान किया जाता है: पासवर्ड: कैट $ पुष्टिकरण पासवर्ड: कैट @ क्षेत्र की पुष्टि में एक मैच का उत्पादन करेगा हालांकि मेरे पास मेरी सत्यापन स्क्रिप्ट है जो इसे प्रस्तुत करने की अनुमति नहीं देगी उपयोगकर्ता के लिए गलत संकेतक।

— ट्रेकबाउट

Answer 1

एचटीएमएल 5 सत्यापन के साथ बिल्कुल नहीं, लेकिन थोड़ा जावास्क्रिप्ट समस्या को हल कर सकता है, नीचे दिए गए उदाहरण का पालन करें:

<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br /><br />
<input type="submit" />

Comments

क्या यह कोड एक समस्या का अनुभव करेगा यदि हम: 1. दोनों पासवर्ड समान लिखें और फिर 2. पहले पासवर्ड फ़ील्ड पर वापस जाएं और वहां मान बदलें?

— म्लादेन बी

हां, और यदि आप उदाहरण के लिए पहले क्षेत्र में 'एबीसी', और दूसरे क्षेत्र में 'बीसीडी' दर्ज करते हैं, और फिर 'एबीसी' को पहले क्षेत्र में बदलकर 'बीसीडी' पासवर्ड मिलान कर रहे हैं, लेकिन फिर भी आपको मिलेगा अमान्य इनपुट संदेश।

— Roel Koops

उपरोक्त टिप्पणियों में वर्णित मुद्दों को निम्नलिखित द्वारा संबोधित किया जा सकता है: 1) oninput="check(this)"पहले पासवर्ड फ़ील्ड में जोड़ना , और 2) input.valueफ़ंक्शन में बदलना document.getElementById('password_confirm').value। तो यह हो जाता हैif (document.getElementById('password_confirm').value != document.getElementById('password').value)

— कोदोस जॉनसन

Answer 2

आप नियमित अभिव्यक्तियों के साथ इनपुट पैटर्न ( ब्राउज़र संगतता की जांच कर सकते हैं )

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>

Comments

हालांकि यह काम करता है, यह अभी भी दो कारणों से एक बुरा जवाब है: आप दावा करते हैं कि यह एक html-only समाधान है, जो यह नहीं है, और आप यह नहीं समझाते हैं कि यह कैसे काम करता है।

— wvdz

शायद यही सच है। अभी तक जबकि यह एक बुरा जवाब है, यह एक साफ समाधान है। जब किसी मूल्य को पहले फ़ील्ड में दर्ज किया जाता है, तो यह उस इनपुट के लिए परिभाषित पासवर्ड पैटर्न की जाँच करता है। यदि आपका pw पैटर्न फिट नहीं है तो यह एक संदेश प्रदर्शित करता है। यदि यह आपके आवश्यक पैटर्न से मेल खाता है, तो उपयोगकर्ता द्वारा दर्ज किए जाने वाले मूल्य के लिए यह दूसरे pw फ़ील्ड के लिए आवश्यक पैटर्न को बदल देता है। यदि उपयोगकर्ता दूसरे फ़ील्ड में कुछ दर्ज करता है, तो उसे पहले फ़ील्ड से मान होना चाहिए या त्रुटि संदेश प्रदर्शित किया जाना चाहिए। बहुत अच्छा। मैं कुछ विचार दे रहा हूं कि क्या यह किसी भी सुरक्षा मुद्दों को दर्शाता है। मुझे नहीं लगता कि यह करता है ...

— ब्रायन लेमैन

यहाँ चाल "form.password_two.pattern = this.value" है, जो विशेष वर्णों के साथ टूट जाएगा जिनका विशेष अर्थ है regexps में

— dequis

@wvdz ने कभी नहीं कहा कि यह शुद्ध HTML है, लेकिन स्पष्टता के लिए ब्राउज़र संगतता लिंक जोड़ा गया

— फ्रांसिस्को कोस्टा

मेरा मानना ​​है कि, क्षेत्र के patternलिए विशेषता को छोड़ दिया जाना चाहिए password_two। वर्तमान में, यदि आप एक पासवर्ड टाइप करते हैं, जो 6 वर्णों से छोटा है password_two, तो passwordखाली छोड़ते समय - यह Please enter the same Password as aboveसत्यापन संदेश दिखाएगा । अधिक भ्रमित करने वाला क्या हो सकता है: यदि आप दोनों क्षेत्रों में एक ही पासवर्ड डालते हैं, तो ऐसा ही होता है, जो कि 6 वर्णों से छोटा है।

Answer 3

न्यूनतम जावास्क्रिप्ट के साथ एक सरल समाधान html विशेषता पैटर्न ( अधिकांश आधुनिक ब्राउज़रों द्वारा समर्थित ) का उपयोग करना है। यह दूसरे क्षेत्र के पैटर्न को पहले क्षेत्र के मूल्य पर सेट करके काम करता है।

दुर्भाग्य से, आपको रेगेक्स से बचने की आवश्यकता है, जिसके लिए कोई मानक फ़ंक्शन मौजूद नहीं है।

<form>
    <input type="text" oninput="form.confirm.pattern = escapeRegExp(this.value)">
    <input name="confirm" pattern="" title="Fields must match" required>
</form>
<script>
    function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
</script>

Comments

इसके लिए धन्यवाद; मैं फंक्शन को सीधे हैंडलर में डालने में सक्षम था, लेकिन मुझे कन्फर्मेशन पर एक आईडी डालनी थी: <input type="password" name="password" oninput="document.getElementById('confirm').pattern = this.value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')" required><input type="password" id="confirm" name="confirm" pattern="" title="Fields must match" required>आपकी तरह पठनीय नहीं, लेकिन अलग स्क्रिप्ट / फंक्शन से बचता है।

— डेविड ब्राउन

Answer 4

जावास्क्रिप्ट की आवश्यकता होगी, लेकिन तुलना करने के लिए एक मध्यस्थ <output>तत्व और एक oninputफॉर्म हैंडलर का उपयोग करके कोड की मात्रा को न्यूनतम रखा जा सकता है (पैटर्न और सत्यापन इस समाधान को बढ़ा सकते हैं, लेकिन सरलता के लिए यहां नहीं दिखाए गए हैं):

<form oninput="result.value=!!p2.value&&(p1.value==p2.value)?'Match!':'Nope!'">
  <input type="password" name="p1" value="" required />
  <input type="password" name="p2" value="" required />
  <output name="result"></output>
</form>

Answer 5

HTML5 ही नहीं बल्कि जावास्क्रिप्ट का एक सा हिस्सा
[यहाँ] https://codepen.io/diegoleme/pen/surki

एचटीएमएल

    <form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>

        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

JAVASCRIPT

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

Answer 6

पैटर्न और रेगेक्स का उपयोग करने वाले उत्तर उपयोगकर्ता के पासवर्ड को सादे पाठ के रूप में इनपुट गुणों में लिखते हैं pattern='mypassword'। यह केवल तभी दिखाई देगा जब डेवलपर टूल खुले होंगे, लेकिन यह अभी भी एक अच्छा विचार नहीं है।

एक मैच के लिए पैटर्न का उपयोग करने के साथ एक और मुद्दा यह है कि आप यह जांचने के लिए पैटर्न का उपयोग करना चाहते हैं कि पासवर्ड सही फॉर्म का है, जैसे मिश्रित अक्षर और संख्या।

मुझे भी लगता है कि अगर उपयोगकर्ता इनपुट के बीच स्विच करते हैं तो ये विधियां अच्छी तरह से काम नहीं करेंगी।

यहां मेरा समाधान है जो थोड़ी अधिक जावास्क्रिप्ट का उपयोग करता है, लेकिन जब इनपुट अपडेट किया जाता है तो एक साधारण समानता जांच करता है और फिर एक कस्टम HTML वैधता सेट करता है। दोनों इनपुट अभी भी एक पैटर्न जैसे ईमेल प्रारूप या पासवर्ड जटिलता के लिए परीक्षण किए जा सकते हैं।

एक वास्तविक पृष्ठ के लिए आप इनपुट प्रकारों को 'पासवर्ड' में बदल देंगे।

<form>
    <input type="text" id="password1" oninput="setPasswordConfirmValidity();">
    <input type="text" id="password2" oninput="setPasswordConfirmValidity();">
</form>
<script>
    function setPasswordConfirmValidity(str) {
        const password1 = document.getElementById('password1');
        const password2 = document.getElementById('password2');

        if (password1.value === password2.value) {
             password2.setCustomValidity('');
        } else {
            password2.setCustomValidity('Passwords must match');
        }
        console.log('password2 customError ', document.getElementById('password2').validity.customError);
        console.log('password2 validationMessage ', document.getElementById('password2').validationMessage);
    }
</script>

Answer 7

जैसा कि अन्य उत्तरों में बताया गया है, ऐसा करने के लिए कोई शुद्ध HTML5 तरीका नहीं है।

यदि आप पहले से ही JQuery का उपयोग कर रहे हैं , तो आपको वही करना चाहिए जो आपको चाहिए:

$(document).ready(function() {
  $('#ourForm').submit(function(e){
      var form = this;
      e.preventDefault();
      // Check Passwords are the same
      if( $('#pass1').val()==$('#pass2').val() ) {
          // Submit Form
          alert('Passwords Match, submitting form');
          form.submit();
      } else {
          // Complain bitterly
          alert('Password Mismatch');
          return false;
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ourForm">
    <input type="password" name="password" id="pass1" placeholder="Password" required>
    <input type="password" name="password" id="pass2" placeholder="Repeat Password" required>
    <input type="submit" value="Go">
</form>