अगर एचटीएमएल 5 सत्यापन पास हो गया है तो केवल reCaptcha कैसे चलाएं?

Question

आमतौर पर, एचटीएमएल 5 फॉर्म सत्यापन submit ईवेंट से पहले चलाता है।

इस

<form id="myForm"> 
    <input type="text" name="foo" required /> 

    <button type="submit"> Submit </button> 

</form> 

<script> 
    $("#myForm").on('submit',function(){ 
     console.log("I'm entering the submit event handler"); 
    }); 
</script> 

यदि इनपुट फ़ील्ड रिक्त है साथ

, प्रस्तुत ईवेंट हैंडलर नहीं चलता है। यह केवल तब ट्रिगर किया जाएगा जब HTML5 सत्यापन (required विशेषता, इस मामले में) पास हो गई है।

मुझे उम्मीद है कि एचटीएमएल 5 सत्यापन के बाद भी कैप्चा चलाने की उम्मीद है; मुझे कैप्चा को संकलित करने वाले उपयोगकर्ता को परेशान क्यों करना है यदि बाद में मैं उसे चेतावनी दूंगा कि फ़ील्ड गुम हैं? पहले मुझे उपयोगकर्ता को सही तरीके से सब कुछ करने के लिए मजबूर करना चाहिए, फिर सुनिश्चित करें कि यह एक मानव है और बॉट नहीं है, IMHO।

जाहिर है, reCaptcha एचटीएमएल 5 सत्यापन सुविधा को हटाने, जिस फ़ॉर्म पर संलग्न है, उस पर कुछ करता है।

उदाहरण के लिए, नवीनतम Invisible reCaptcha का उपयोग कर:

<form id="myForm"> 
    <input type="text" name="foo" required /> 

    <button type="submit" 
      class="g-recaptcha" 
    data-sitekey="your_site_key" 
    data-callback='myCallback'> Submit </button> 

</form> 

<script> 
    function myCallback(token){ 
     $("#myForm").submit(); 
    } 

    $("#myForm").on('submit',function(){ 
     console.log("I'm entering the submit event handler"); 
    }); 
</script> 

प्रपत्र अपने obligatoriness के बारे में उपयोगकर्ता सूचित किए बिना खाली क्षेत्र के साथ प्रस्तुत किया जाएगा।

कोई संकेत यह क्यों काम करता है? क्या कोई तरीका है कि मैं नियंत्रण लेने से पहले HTML5 फॉर्म सत्यापन को चलाने के लिए reCaptcha को निर्देश दे सकता हूं?

Answer 1

सीधे बटन पर reCAPTCHA विशेषताओं को जोड़ने के बजाय आपको उन्हें एक div में जोड़ना होगा और फिर फॉर्म सबमिट पर grecaptcha.execute(); का उपयोग करना होगा।

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

<form id="myForm"> 
    Name: (required) <input id="field" name="field" required> 
    <div id='recaptcha' class="g-recaptcha" 
     data-sitekey="your_site_key" 
     data-callback="onCompleted" 
     data-size="invisible"></div> 
    <button id='submit'>submit</button> 
</form> 
<script> 
    $('#myForm').submit(function(event) { 
     console.log('validation completed.'); 

     event.preventDefault(); //prevent form submit before captcha is completed 
     grecaptcha.execute(); 
    }); 

    onCompleted = function() { 
     console.log('captcha completed.'); 
    } 
</script> 

जब आप जोड़ने reCAPTCHA बटन तुमने किया था के रूप में करने के लिए जिम्मेदार बताते हैं, गूगल बस बटन के एक क्लिक के श्रोता कहते हैं और reCAPTCHA कार्यान्वित बटन क्लिक होने। कोई सबमिट श्रोता जोड़ा नहीं है। एचटीएमएल 5 सत्यापन केवल सबमिट बटन पर क्लिक करके ट्रिगर किया जाता है और सबमिट ईवेंट से पहले चलाता है। यही कारण है कि हमें यह सुनिश्चित करना होगा कि reCAPTCHA सबमिट ईवेंट के बाद चलाता है। स्पष्ट रूप से क्लिक ईवेंट, जो reCAPTCHA सदस्यता लेता है, आंतरिक HTML5 सत्यापन ट्रिगर होने से पहले निपटाया जाता है। जब आप submit() का उपयोग कर फ़ॉर्म सबमिट करते हैं तो सत्यापन भी ट्रिगर नहीं होता है। यही वह कार्य है जिसे फ़ंक्शन परिभाषित किया गया है। क्योंकि आप अपने कॉलबैक में फ़ंक्शन को कॉल करते हैं, सत्यापन ट्रिगर नहीं होता है। हालांकि अगर आपने कॉलबैक में submit() फ़ंक्शन को कॉल नहीं किया है, तो ऐसा लगता है कि reCAPTCHA ईवेंट को इसके डिफ़ॉल्ट व्यवहार से रोकता है और इस प्रकार सत्यापन पूरी तरह बंद कर देता है।

reCAPTCHA पूरा होने

के बाद प्रपत्र जमा करें आप प्रपत्र के बाद reCAPTCHA पूरा हो गया है प्रस्तुत करना चाहते हैं, तो आप grecaptcha.getResponse() का परिणाम के लिए देख सकते हैं।

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

<form id="myForm"> 
    Name: (required) <input id="field" name="field" required> 
    <div id='recaptcha' class="g-recaptcha" 
     data-sitekey="your_site_key" 
     data-callback="onCompleted" 
     data-size="invisible"></div> 
    <input type="submit" value="submit" /> 
</form> 
<script> 
    $('#myForm').submit(function(event) { 
     console.log('form submitted.'); 

     if (!grecaptcha.getResponse()) { 
      console.log('captcha not yet completed.'); 

      event.preventDefault(); //prevent form submit 
      grecaptcha.execute(); 
     } else { 
      console.log('form really submitted.'); 
     } 
    }); 

    onCompleted = function() { 
     console.log('captcha completed.'); 
     $('#myForm').submit(); 
     alert('wait to check for "captcha completed" in the console.'); 
    } 
</script>