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

Дискусията в 'Web Development' стартирана от dropaway, Септ 26, 2018.

  1. dropaway

    dropaway Member

    Рег.:
    Май 14, 2013
    Съобщения:
    41
    Харесвания:
    0
    Точки:
    6
    Здравейте, имам проблем със една форма за контакти в която искам да добавя 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
      File size:
      46 KB
      Преглеждания:
      4
  2. TheCollector

    TheCollector New Member

    Рег.:
    Септ 11, 2018
    Съобщения:
    10
    Харесвания:
    2
    Точки:
    3
    Пол:
    Мъж
    Такааааа .... Показва ли ти някакви грешки web конзолата (Какво излиза, когато натиснеш F12?)? Това, което виждам на пръв поглед е, че за да се покаже recaptcha-та трябва да има елемент
    label с class recaptcha а такъв не се създава. Опитай да добавиш във формата просто:
    Код:
    <label class="recaptcha"></label>
    
    И виж какво ще стане. Ако не помогне вероятно довечера ще го огледам повече. По-принцип проверява за този елемент преди дори да инициализира recaptcha-та.

    Успех.

    Пиши какво е станало ...
     
    Последно редактирано: Окт 1, 2018
  3. dropaway

    dropaway Member

    Рег.:
    Май 14, 2013
    Съобщения:
    41
    Харесвания:
    0
    Точки:
    6
    Не излиза нищо в конзолата, сложих и <label class="recaptcha"> но си изпраща нещата без да провери CAPTCHA-та
     
  4. ReminD

    ReminD Well-Known Member

    Рег.:
    Ян 22, 2008
    Съобщения:
    6,179
    Харесвания:
    1,139
    Точки:
    113
    <script src="https://www.google.com/recaptcha/api.js" async defer></script> нали го имаш това?


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

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


    Дай и бек енд кода
     
  5. tripplebdesign

    tripplebdesign Member

    Рег.:
    Юли 15, 2015
    Съобщения:
    30
    Харесвания:
    0
    Точки:
    6
    Пол:
    Мъж
    Професия:
    Full Stack Developer
    Място:
    София
    Привет, колега,

    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>" Също така ако следваш стъпките ТУК мисля, че всичко ще ти стане ясно. Надявам се всичко това ти е полезно и се справиш с реКапчата ;)
     
  6. tripplebdesign

    tripplebdesign Member

    Рег.:
    Юли 15, 2015
    Съобщения:
    30
    Харесвания:
    0
    Точки:
    6
    Пол:
    Мъж
    Професия:
    Full Stack Developer
    Място:
    София
    Също така с твоя код подкарах реКапчата без проблем. Ето как:

    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-та запали
     
  7. dropaway

    dropaway Member

    Рег.:
    Май 14, 2013
    Съобщения:
    41
    Харесвания:
    0
    Точки:
    6
    Благодаря за отзивчивостта и информацията, някои от статиите съм ги разгледал, като цяло подкарах recaptchata да се покаже, но идеята да стане задължителна, понеже в момента съобщенията се изпращат без да се провери дали е чекнат реКапчата, предполагам в случая (js) кода прави това, може би не съм се изразил правилно в по-горните постове, сега ще пусна целия пакет.
     

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

  8. dropaway

    dropaway Member

    Рег.:
    Май 14, 2013
    Съобщения:
    41
    Харесвания:
    0
    Точки:
    6
    Пуснах го малко по-долу, както писах и на колегата, в момента съобщенията се изпращат без да се провери дали е чекнат реКапчата.
     
  9. Илиян

    Илиян Active Member

    Рег.:
    Март 8, 2017
    Съобщения:
    147
    Харесвания:
    57
    Точки:
    28
    Пол:
    Мъж
    Captcha и Javascript - много странна комбирация.
     
    хейтър харесва това.
  10. tripplebdesign

    tripplebdesign Member

    Рег.:
    Юли 15, 2015
    Съобщения:
    30
    Харесвания:
    0
    Точки:
    6
    Пол:
    Мъж
    Професия:
    Full Stack Developer
    Място:
    София
  11. dropaway

    dropaway Member

    Рег.:
    Май 14, 2013
    Съобщения:
    41
    Харесвания:
    0
    Точки:
    6
    благодаря, ще го напасвам
     
  12. dropaway

    dropaway Member

    Рег.:
    Май 14, 2013
    Съобщения:
    41
    Харесвания:
    0
    Точки:
    6
    напаснах го... в MailHandler.php добавих от другия пакет това:
    PHP:
    $captcha $_POST['g-recaptcha-response'];

            if(!
    $captcha){
              echo 
    '<p class="alert alert-warning">Моля, изберете "Не съм робот".</p>';
              exit;
            }
     
  13. tripplebdesign

    tripplebdesign Member

    Рег.:
    Юли 15, 2015
    Съобщения:
    30
    Харесвания:
    0
    Точки:
    6
    Пол:
    Мъж
    Професия:
    Full Stack Developer
    Място:
    София

Сподели страницата

  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies.
    Dismiss Notice