Валидация на CAPTCHA чрез .js

D

dropaway

Member
Здравейте, имам проблем със една форма за контакти в която искам да добавя CAPTCHA за потвърждаване, в пакета има .js файл в който е добавена възможност за интеграция и проверка на CAPTCHA, за момента формата си работи, но не мога да го подкарам CAPTCHA-та, самата форма е по-долу, а файла който е прикачен е със съдържанието от .js файла, понеже тук не може да се добави дълъг текст...,ако някой може да бутне едно рамо,:

PHP: 
                            <form id="contact-form">
                  <div class="contact-form-loader"></div>
                  <fieldset>
                  <div class="col-md-6">
                    <label class="name">
                      <input type="text" name="name" placeholder="Име:" value="" data-constraints="@Required @Length(min=5,max=30)" pattern=".{5,20}" title="5 to 20 characters" required />
                      <span class="empty-message">*Полето трябва да се попълни задължително.</span>
                      <span class="error-message">*Името трябва да бъде над 4 символа.</span>
                    </label>
                   </div><div class="col-md-6">
                    <label class="email">
                      <input type="text" name="email" placeholder="E-mail:" value="" data-constraints="@Required @Email" />
                      <span class="empty-message">*Полето трябва да се попълни задължително.</span>
                      <span class="error-message">*Имейлът не е валиден.</span>
                    </label>
                   </div><div class="col-md-12">
                    <label class="message">
                      <textarea name="message" placeholder="Съобщение:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
                      <span class="empty-message">*Полето трябва да се попълни задължително.</span>
                      <span class="error-message">*Съобщението е твърде късо.</span>
                    </label></div>
                    <div class="clear"></div>
                 <div class="col-md-3">
                      <a href="#" class="readmore send-button" data-type="submit">Изпрати</a>
                    </div><div class="col-md-3">
                   <div class="g-recaptcha" data-sitekey="6LfONHIUAAAAALBSuiGPygj-U0MvR5LF2oJGSC-X"></div>
                    </div>
                  </fieldset>
                  <div class="modal fade response-message">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                          <h4 class="modal-title">Изпратено!</h4>
                        </div>
                        <div class="modal-body">
                          Вашето запитване е изпратено! Ще се свържем възможно най-скоро със Вас.
                        </div>     
                      </div>
                    </div>
                  </div>
</form>
 

Прикачени файлове

  • js.txt
    46 KB · Преглеждания: 4
Такааааа .... Показва ли ти някакви грешки web конзолата (Какво излиза, когато натиснеш F12?)? Това, което виждам на пръв поглед е, че за да се покаже recaptcha-та трябва да има елемент
label с class recaptcha а такъв не се създава. Опитай да добавиш във формата просто:
Код: 
<label class="recaptcha"></label>

И виж какво ще стане. Ако не помогне вероятно довечера ще го огледам повече. По-принцип проверява за този елемент преди дори да инициализира recaptcha-та.

Успех.

Пиши какво е станало ...
 
Последно редактирано:
Не излиза нищо в конзолата, сложих и <label class="recaptcha"> но си изпраща нещата без да провери CAPTCHA-та
 
Привет, колега,

Any calls to the v1 API will not work after March 31, 2018, според тази статия ЦЪК. Също така, според статията "<script src="https://www.google.com/recaptcha/api.js" async defer></script>" трябва да е "<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>" Също така ако следваш стъпките ТУК мисля, че всичко ще ти стане ясно. Надявам се всичко това ти е полезно и се справиш с реКапчата ;)
 
Също така с твоя код подкарах реКапчата без проблем. Ето как:

1. Копирах твоя код и в нов html файл. В <head> tag-a добавих
HTML: 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
    <script src="test.js"></script>

Където "test.js" e съдържанието на твоя .js файл.

2. Отидох на https://www.google.com/recaptcha/admin и създадох нов label за localhost за да си получа двойката ключове.
3. Промених "<div class="g-recaptcha" data-sitekey="6LfONHIUAAAAALBSuiGPygj-U0MvR5LF2oJGSC-X"></div>" с моят sitekey
4. В "test.js" добавих моя secret, където имаше това "recaptchaPublicKey:'6LeTHnMUAAAAAJSOs5CiHRgGul4rgwEEWxe6CL5B'"

И voilà! reCaptcha-та запали
 
tripplebdesign каза:
Също така с твоя код подкарах реКапчата без проблем. Ето как:

1. Копирах твоя код и в нов html файл. В <head> tag-a добавих
HTML: 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
    <script src="test.js"></script>

Където "test.js" e съдържанието на твоя .js файл.

2. Отидох на https://www.google.com/recaptcha/admin и създадох нов label за localhost за да си получа двойката ключове.
3. Промених "<div class="g-recaptcha" data-sitekey="6LfONHIUAAAAALBSuiGPygj-U0MvR5LF2oJGSC-X"></div>" с моят sitekey
4. В "test.js" добавих моя secret, където имаше това "recaptchaPublicKey:'6LeTHnMUAAAAAJSOs5CiHRgGul4rgwEEWxe6CL5B'"

И voilà! reCaptcha-та запали
Увеличете...
Благодаря за отзивчивостта и информацията, някои от статиите съм ги разгледал, като цяло подкарах recaptchata да се покаже, но идеята да стане задължителна, понеже в момента съобщенията се изпращат без да се провери дали е чекнат реКапчата, предполагам в случая (js) кода прави това, може би не съм се изразил правилно в по-горните постове, сега ще пусна целия пакет.
 

Прикачени файлове

  • contact-form.zip
    29.1 KB · Преглеждания: 2
ReminD каза:
<script src="https://www.google.com/recaptcha/api.js" async defer></script> нали го имаш това?


<script type="text/javascript">
var onloadCallback = function() {
alert("grecaptcha is ready!");
};
</script>

пусни и това и виж какво става


Дай и бек енд кода
Увеличете...

Пуснах го малко по-долу, както писах и на колегата, в момента съобщенията се изпращат без да се провери дали е чекнат реКапчата.
 
напаснах го... в MailHandler.php добавих от другия пакет това:
PHP: 
$captcha = $_POST['g-recaptcha-response'];

        if(!$captcha){
          echo '<p class="alert alert-warning">Моля, изберете "Не съм робот".</p>';
          exit;
        }
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе