lundi 25 janvier 2016

New recaptcha google checkbox

I want to insert the new recaptcha checkbox from google code into my template but i can't get it work. Can somebody help me please. Is there a way i can get in the validation function.

Thanks in advance

<form id="formContact" autocomplete="on">
                        <div class="row">
                            <div class="col-sm-6 nopadding-right">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="fa fa-user"></span></div>
                                    <input type="text" id="name" name="name" placeholder="Naam" class="form-control requiredField name" value="" />
                                </div>

                                    <input type="email" id="email" name="u_mail" placeholder="Uw email" class="form-control requiredField email" value="" />

                                </div>
                                <div class="input-group">
                    <div class="g-recaptcha" data-sitekey="key"></div>
                    </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="input-group mail-block">
                                    <div class="input-group-addon"><span class="fa fa-pencil"></span></div>
                                    <textarea id="message" class="form-control message" name="u_text" placeholder="Message" rows="4"></textarea>

                                    <input class="btn btn-primary inverse-btn" type="submit" value="Send" />
                                </div>
                            </div>
                        </div>
                    </form>

function validation (formId) {
if($('form#'+ formId +' .field-success')[0] ) $('form#'+ formId +' .field-success').remove();
$('form#'+ formId +' .field-error').remove();
$('form#'+ formId +' .form-control').removeClass('inputError');
var hasError = false;
$('form#'+ formId +' .requiredField').each(function() {
    if(jQuery.trim($(this).val()) == '' || jQuery.trim($(this).val()) == jQuery.trim($(this).attr('placeholder'))){
        $(this).parent().append('<strong class="field-error">Dit is een verplicht veld.</strong>');
        $(this).addClass('inputError');
        hasError = true;
    } else {
        if($(this).hasClass('email')) {
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if(!emailReg.test(jQuery.trim($(this).val()))){
                $(this).parent().append('<strong class="field-error">Please enter a valid email address.</strong>');
                $(this).addClass('inputError');
                hasError = true;
            } 
        } else if($(this).hasClass('phone')) {
            var phoneReg = /^\+?[0-9 ]*$/;
            if(!phoneReg.test(jQuery.trim($(this).val()))){
                $(this).parent().append('<strong class="field-error">Please enter a valid phone number.</strong>');
                $(this).addClass('inputError');
                hasError = true;
            } 
        } else if($(this).hasClass('date')) {
            var dateReg = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
            if(!dateReg.test(jQuery.trim($(this).val()))){
                $(this).parent().append('<strong class="field-error">Please enter a valid date.</strong>');
                $(this).addClass('inputError');
                hasError = true;
            } 
        } else if($(this).hasClass('time')) {
            var dateReg = /^[0-9]{2}:[0-9]{2}$/;
            if(!dateReg.test(jQuery.trim($(this).val()))){
                $(this).parent().append('<strong class="field-error">Please enter a valid time.</strong>');
                $(this).addClass('inputError');
                hasError = true;
            } 
        } else if($(this).hasClass('persons')) {
            var personsReg = /^[1-9]{1}[0-9]{0,1}$/;
            if(!personsReg.test(jQuery.trim($(this).val()))){
                $(this).parent().append('<strong class="field-error">Please enter a valid number of persons.</strong>');
                $(this).addClass('inputError');
                hasError = true;
            } 
        }
    }
});

return hasError;

}

$(document).on("submit", "form#formContact", function() {
    if(!validation($(this).attr("id"))) {
        //here code if validation is successful
        var varname = $('#name').val();
        var vartel = $('#tel').val();
        var varemail = $('#email').val();
        var varmessage = $('#message').val();

        var data = 'name' + varname + 'tel' + vartel + 'email' + varemail + 'message' + varmessage;
        console.log(data);
    }
    return false;
});




Aucun commentaire:

Enregistrer un commentaire