Here is the form on my site. The first part is the form. It also includes some JS to resize the Recaptcha2 box to the same size as my form width. After that is the validation script but I need a way to incorporate validation of the Recaptcha box to prove its been ticked. At the moment you can submit the form by filling on all the fields but can still successfully send it without ticking the Captcha box. I want to retain the same error format/style as those generated by the validation script when you incorrectly fill out one of the three main info fields, ie name, email and message. I have looked at other scripts that use $document ready function calls but they interfere with other scripts running on the page.Here is the URL showing the site in action:
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>
