我希望能够将ReCaptcha2的验证添加到我现有的验证脚本

Question

这是我网站上的表单。第一部分是表格。它还包括一些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>