2016-03-21 9 views
0

İşte jsp'de basit bir form var. Hem reCAPTCHA hem de textbox'ın 'required' alanları olmasını istiyorum. Şu anda, sadece metin kutusunu doldurup 'Oturum Aç' düğmesine basarsam, hala veri gönderir. ReCAPTCHA’yı zorunlu kılmayı zorunlu kılıyor muyum?ReCAPTCHA doğrulama

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<script src='https://www.google.com/recaptcha/api.js'></script> 

</head> 

<body> 

<label> Form </label> 

<form action = "somefile" method = "post"> 

    <input = "text" name = "textbox1" required> 

    <div class="g-recaptcha" data-sitekey="6LdliBkTAAAAALmMlPRRm0NtKW3fz2kT2nxiWrVG"></div> 

    <button type="submit" name="login">Sign In</button> 

</form> 

</body> 
</html> 
+1

[* Belgeleri okuyunuz] (http://webdesign.tutsplus.com/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website--cms-23024) sınayı sınayın veya formu gönderdikten sonra sunucudan yanıtı görüntüleyin, önceden kontrol edemezsiniz (aksi halde yenmek oldukça kolay olurdu). – RobG

+0

Okaaaay. Anladım –

+0

Bunun jQuery Validate eklentisi ile ne ilgisi var? Lütfen yalnızca sorunuzun içeriğini yansıtan etiketler kullanın; başka bir şey etiket-spam olarak kabul edilir. Düzenlenen. Teşekkürler. – Sparky

cevap

1

Bazı javascript ile gerekli reCaptcha'yı kesinlikle yapabilirsiniz. Tabii ki hala reCaptcha sunucu tarafını doğrulamanız gerekiyor ancak bu, bazı istemci tarafı doğrulaması ekleyecektir.

var captcha_passed = false; 
  • başarıyla tamamladıktan sonra sizin işlevi çağırmak için Google'ın reCAPTCHA'yı söyle:

    <div class="g-recaptcha" data-callback="on_captcha_filled" data-sitekey="6LdliBkTAAAAALmMlPRRm0NtKW3fz2kT2nxiWrVG"></div> 
    
    • Sen ReCaptcha çözülüp çözülmediğini takip etmek için bazı javascript değişkeni gerek Kullanıcılarınızın bunun kaçırıldığını bilmesini sağlamak için bir etiket ekleyin. Gizli yap. Javascript reCaptcha olmadan gönderirse gösterecektir.
      <label id="lblCaptchaRequired" style="color: red" hidden>Please complete the reCaptcha</label> 
      
    • javascript fonksiyonu ekle

      ReCAPTCHA tarafından çağrılacak:

      function on_captcha_filled() { 
          captcha_passed = true; 
          document.getElementById("lblCaptchaRequired").hidden = true; 
      } 
      
    • devam etmeden önce ReCaptcha geçti doğrulamak için forma bir onsubmit işleyicisi ekleyin:

      <form action = "somefile" method = "post" onsubmit = "check_captcha(event)"> 
      
    • onsubmit işleyicisini ekleyin javascript:

      function check_captcha(e) { 
          if (captcha_passed) 
           return true; 
          document.getElementById("lblCaptchaRequired").hidden = false; 
          e.preventDefault(); 
      } 
      
    • Güncelleme formu:

      <form action = "somefile" method = "post" onsubmit = "check_captcha(event)"> 
      
          <input = "text" name = "textbox1" required> 
      
          <div class="g-recaptcha" data-callback="on_captcha_filled" data-sitekey="6LdliBkTAAAAALmMlPRRm0NtKW3fz2kT2nxiWrVG"></div> 
          <label id="lblCaptchaRequired" style="color: red" hidden>Please complete the reCaptcha</label> 
      
          <button type="submit" name="login">Sign In</button> 
      
      </form> 
      
    • JavaScript kullanıcı o sayfayı ulaştığında

      var captcha_passed = false; 
      
      /* 
      * Form onsubmit handler. 
      * Display captcha required label and prevent submit until captcha_passed is true 
      */ 
      function check_captcha(e) { 
          if (captcha_passed) 
           return true; 
          document.getElementById("lblCaptchaRequired").hidden = false; 
          e.preventDefault(); 
      } 
      
      /* 
      * Google reCaptcha data-callback handler. 
      * Sets captcha_passed to true to allow form submission and hides captcha required label. 
      */ 
      function on_captcha_filled() { 
          captcha_passed = true; 
          document.getElementById("lblCaptchaRequired").hidden = true; 
      } 
      

    Şimdi, gerekli etiket başlangıçta gizli dosya ve captcha_passedfalse için başlatılır. Kullanıcı formu gönderdiğinde, captcha_passed bayrağını kontrol eden ve gönder eyleminin devam etmesini veya durdurmasını ve etiketi göstermesini sağlayan check_captcha bildirme işleyicisi çağrılır.
    Kullanıcı reCaptcha'yı tamamladığında, on_captcha_filled işleviniz bayrağını true olarak ayarlar ve etiketi gizler.