Я хочу иметь возможность добавить проверку для ReCaptcha2 в мой существующий сценарий проверки - PullRequest
0 голосов
/ 02 мая 2018

Вот форма на моем сайте. Первая часть - это форма. Он также включает в себя некоторые JS, чтобы изменить размер поля Recaptcha2 до того же размера, что и ширина моей формы. После этого есть скрипт проверки, но мне нужен способ включить проверку поля Recaptcha, чтобы доказать, что он отмечен галочкой. На данный момент вы можете отправить форму, заполнив все поля, но все еще можете успешно отправить ее, не отметив поле Captcha. Я хочу сохранить тот же формат ошибок / стиль, что и те, которые генерируются сценарием проверки, когда вы неправильно заполняете одно из трех основных информационных полей: имя, адрес электронной почты и сообщение. Я рассмотрел другие сценарии, которые используют вызовы функций $ document ready, но они мешают другим сценариям, запущенным на странице. Вот URL-адрес, показывающий сайт в действии:

http://www.topolinowebdesigns.uk/test-site/aerocoat/index.html

            <!-- Contact Form -->
            <form id="contact-us" class="form-horizontal" action="includes/contact.php" method="post">
            <fieldset class="col-sm-12">

                <div class="form-group">
                <input type="text" name="contactName" id="contactName" class="form-control requiredField" placeholder="Your Name">
                </div>

                <div class="form-group">
                <input type="text" name="email" id="email" class="form-control requiredField email" placeholder="Your Email">
                </div>

                <div class="form-group">
                <textarea name="comments" id="commentsText" class="form-control requiredField" rows="5" placeholder="Your Message"></textarea>
                </div>

                <script>
                $(function(){
                // global variables
                captchaResized = false;
                captchaWidth = 303;
                captchaHeight = 78;
                captchaWrapper = $('#recaptcha-wrapper');
                captchaElements = $('#rc-imageselect, .g-recaptcha');

                resizeCaptcha();
                $(window).on('resize', function() {
                resizeCaptcha();
                });
                });

                function resizeCaptcha() {
                if (captchaWrapper.width() >= captchaWidth) {
                if (captchaResized) {
                captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', '');
                captchaWrapper.height(captchaHeight);
                captchaResized = false;
                }
                } else {
                var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15));
                captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0');
                captchaWrapper.height(captchaHeight * scale);
                if (captchaResized == false) captchaResized = true;
                }
                }
                </script>

                <div id="recaptcha-wrapper" class="g-recaptcha form-group" data-theme="dark" data-sitekey="my secret site key goes here"></div>

                <div class="form-group" style="margin-top: 10px;">
                <button name="submit" type="submit" class="btn btn-default btn-transparent btn-xs btn-flat mt-0 mr-10">Send</button>
                <input type="hidden" name="submitted" id="submitted" value="true" />
                <button type="reset" class="btn btn-default btn-transparent btn-xs btn-flat mt-0">Reset</button>
                </div>

                </fieldset>
                </form>

                <!-- Contact Form Validation-->
                <script type="text/javascript">
                <!--//--><![CDATA[//><!--
                $(document).ready(function() {
                $('form#contact-us').submit(function() {
                $('form#contact-us .error').remove();
                var hasError = false;
                $('.requiredField').each(function() {
                if($.trim($(this).val()) == '') {
                var labelText = $(this).prev('placeholder').text();
                $(this).parent().append('<span class="error">This field is required!</span>');
                $(this).addClass('inputError');
                hasError = true;
                } else if($(this).hasClass('email')) {
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if(!emailReg.test($.trim($(this).val()))) {
                var labelText = $(this).prev('placeholder').text();
                $(this).parent().append('<span class="error">You\'ve entered an invalid email address!</span>');
                $(this).addClass('inputError');
                hasError = true;
                }
                }
                });
                if(!hasError) {
                var formInput = $(this).serialize();
                $.post($(this).attr('action'),formInput, function(data){
                $('form#contact-us').slideUp("fast", function() {                  
                $(this).before('<p align="justify" class="alert alert-success">Thanks! You have successfully sent your message. We will be in contact with you as soon as possible.</p>');
                });
                });
                }
                return false;   
                });
                });
                //-->!]]>
                </script>               
...