ReCAPTCHAのバリデーション

ここで私はjspで簡単なフォームを持っています。 reCAPTCHAとテキストボックスの両方が「必須」フィールドになりたい。現在、テキストボックスに入力して「サインイン」を押すだけで、それでもデータが送信されます。 reCAPTCHAを必須（必須）にするにはどうすればよいですか？ReCAPTCHAのバリデーション

<!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>

出典

2016-03-21 Hasan Peeal

[*ドキュメントを読む*]（http://webdesign.tutsplus.com/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website--cms-23024）、あなたはテストサーバー側、またはフォームを送信した後にサーバーからの応答を表示すると、事前にチェックすることはできません（そうでなければ、かなり簡単に敗北するでしょう）。 – RobG

Okaaaay。入手しました –

これはjQuery Validateプラグインとは何が関係していますか？あなたの質問の内容を反映するタグだけを使用してください。他のものはタグ・スパムとみなされます。編集されました。ありがとう。 – Sparky

あなたは間違いなくいくつかのjavascriptで必要なreCaptchaを作ることができます。もちろん、あなたはまだreCaptchaサーバー側を確認する必要がありますが、これによりクライアント側の検証が追加されます。

var captcha_passed = false;

を正常に完了すると、あなたの関数を呼び出すために、GoogleのreCAPTCHAの教える：：

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

はあなたのreCAPTCHAが解決されたかどうかを追跡するために、いくつかのjavascriptの変数が必要これが見逃されたことをユーザーに知らせるラベルを追加します。それを隠す。彼らはreCaptchaせずに提出する場合、javascriptはそれを再表示されます。
```
<label id="lblCaptchaRequired" style="color: red" hidden>Please complete the reCaptcha</label> 
```

のreCAPTCHAによって呼び出されるJavaScript関数を追加します：

function on_captcha_filled() { 
    captcha_passed = true; 
    document.getElementById("lblCaptchaRequired").hidden = true; 
}

はreCAPTCHAの続行する前に通過したことを確認するために、フォームにをonSubmitハンドラを追加します。
```
<form action = "somefile" method = "post" onsubmit = "check_captcha(event)"> 
```

onsubmitハンドラを追加javascript：

function check_captcha(e) { 
    if (captcha_passed) 
     return true; 
    document.getElementById("lblCaptchaRequired").hidden = false; 
    e.preventDefault(); 
}

更新形式：

<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ファイル

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; 
}

ユーザーがそのページに到達したときに今、必要なラベルが最初に隠されていると、あなたのcaptcha_passedがfalseに初期化されます。ユーザーがフォームを送信すると、captcha_passedフラグをチェックしてサブミット処理を続行または停止させ、ラベルの表示を解除するonsubmitハンドラcheck_captchaが呼び出されます。
ユーザーがreCaptchaを完了すると、on_captcha_filled関数が呼び出され、フラグをtrueに設定し、ラベルを非表示にします。

出典

2016-11-18 18:35:30 arkane

答えて

関連する問題