CODEWITHSUNDEEP
javascriptjquery
Upment
Upment

Reputation: 1671

Jquery validator module and function call after success

First I don't have much experience with javascript and jquery :) I am just trying to find a quick way to connect jquery email validator module with a function that checks recaptcha. Here is my code:

jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
 }
}
});

Works fine! Inputs are validated.

Now after validation I need two things: First I need to call recapVerify(), after recaptcha gets validated I need to submit my form. This is the example I use: email method. I know I need to use submitHandler now but I can't figure out where and how?

Btw. this is recapVerify() function that I want to use:

 function recapVerify(){
    $.ajax({
    type:'post',
    url: 'captcha_check.php',
    data: {
        recaptcha_challenge_field:$('#recaptcha_challenge_field').val(),
        recaptcha_response_field:$('#recaptcha_response_field').val()
    }
}).done(function(data, textStatus, jqXHR){
    if (data == 'success'){
        $('#err').addClass('hidden');
        //document.forms[0].submit(); // uncomment this line to submit your form
        alert('Success, the form and reCAPTCHA validated, your form was submitted');
    } else {
        $('#err').removeClass('hidden');
    }
}).fail(function(jqXHR,textStatus,errorThrown){
        console.log('recaptcha or service failure');
});
}

Upvotes: 1

Views: 1151

Answers (1)

Arvind Sridharan
Arvind Sridharan

Reputation: 4045

use submitHandler on your jquery validate function. Debug is not needed. In essence this is the javascript you need.

$(document).ready(function(){
    $("#test-form").validate({
        rules: {
            name: {
                required: true,
            },
            email : {
                required : true,
                email : true
           }
        },
            submitHandler : recaptchaVerify
    });
});

function recaptchaVerify(form){
    console.log(form);
    alert("in submit handler");
}

According to the documents at jQuery validate

submitHandler (default: native form submit)

Type: Function()

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

Have also created a fiddle so that you can use it.

Upvotes: 1

Related Questions