google recaptcha validation not working with jquery form validator
Question
My Problem :
I have a registration form as a view in Codeigniter for which I have performed client side validation using Jquery Form validation. The form validation is working perfectly fine for me .
However , I have the following problems with this form :
1.Recaptcha validation : I have a linking checkbox in this form which allows the user to fill in some more details and upload his company logo . When the user clicks on this checkbox , the jquery code simply adds a text box and a file upload option to upload the company logo . (please see my jquery code to add the linking elements when the user checks the checkbox)
If the user does not click on this checkbox , and fills in all the input fields without selecting the recaptcha validation ,and presses submit button, the jquery form validator throws an error message and prompts the user to select the recpatcha validation .
However when , the user clicks on the checkbox for linking option , fills in all the input fields without selecting the recaptcha validation and presses submit button , the page simply refreshes without giving an error message . The jquery form validator should ideally throw an error message and disallow the page to submitted if the user doesnt select the recaptcha validation .
The problem arises only when the user checks the checkbox for linking.
2.Terms and conditions checkbox validation :
If the user does not click on the linking checkbox option , fills in all the input fields without clicking on this checkbox ,and presses submit button, the jquery form validator throws an error message and prompts the user to select the terms and conditions checkbox .
However,when the user checks the linking checkbox , fills in all the input fields including recaptcha validation , but doesn't check the terms and conditions checkbox , and presses submit , the page simply refreshes without throwing an error message . The jquery form validator should ideally throw an error prompting the user to check the terms and conditions checkbox .
Any help on this issue will be appreciated .
My code :
Registration form :
<style>
.error{color:red;font-Style:Arial;font-Size:12px;};
</style>
<script src="https://www.google.com/recaptcha/api.js"></script>
<!-- Main Content -->
<div class="container-fluid">
<div class="side-body">
<!--post-resume-->
<div class="row">
<!--heading-->
<hgroup class="m-b20">
<h1 class="purple-bg">Information Technology Employers</h1>
</hgroup>
<!--content-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<!--left-panel-->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!--<div style="text-align:left;" class="well well-sm">
<h2 class="m-t0">Support</h2>
<p>We recommend you to go through our FAQ section. </br> This might help you with most of your queries related to Membership | Login | Resume | Job </br> Still if you can't find what you're looking for, </p>
</div>-->
<div style="color:#ff0000"><?php //echo validation_errors(); ?></div>
<form class="form-horizontal" role="form" id="myFrm" name="frmempsignup" method="post" action="<?php echo base_url();?>Employer/signup" enctype="multipart/form-data">
<?php //echo form_open_multipart('Employer/signup', array('name'=>"frmempsignup", 'id'=>"myFrm", 'class'=>"form-horizontal", 'role'=>"form"));?>
<div class="row">
<?php if($this->session->flashdata('success')!=''){ ?>
<?php echo $this->session->flashdata('success');?>
<?php } ?>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>Registration</strong> </div>
<div class="panel-body">
<!--f-->
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Company Name:</label>
<div class="col-md-9">
<input type="text" id="idcompany" name="company" class="form-control" placeholder="Company Name" value="<?php echo set_value('company'); ?>" />
<?php echo form_error('company', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Website:</label>
<div class="col-md-9">
<input type="text" id="idcompanyweb" name="companyweb" class="form-control" value="<?php echo set_value('companyweb'); ?>"/>
<?php echo form_error('companyweb', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Full Name:</label>
<div class="col-md-9">
<input type="text" id="name" name="fname" class="form-control" placeholder="Name" value="<?php echo set_value('fname'); ?>">
<?php echo form_error('fname', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Corporate Email:</label>
<div id="iddivemail" class="col-md-9">
<input id="email_id" name="email" class="form-control m-t0" type="email" placeholder="Corporate Email" value="<?php echo set_value('email'); ?>">
<?php echo form_error('email', '<label class="error">','</label>'); ?>
<!--<div id="emailValidationDiv"></div>-->
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Password:</label>
<div class="col-md-9">
<input type="password" name="passwd" id="idpasswd" class="form-control m-t0" placeholder="Password" value="<?php echo set_value('passwd');?>">
<?php echo form_error('passwd', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Confirm Password:</label>
<div class="col-md-9">
<input type="password" name="cpasswd" id="idcpasswd" class="form-control m-t0" placeholder="Password" value="<?php echo set_value('cpasswd');?>">
<?php echo form_error('cpasswd', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Contact No:</label>
<div class="col-md-6">
<input name="mobno" class="form-control" type="text" id="idmobno" placeholder="Contact No" value="<?php echo set_value('mobno');?>">
<?php echo form_error('mobno', '<label class="error">','</label>'); ?>
</div>
<div class="col-md-3">
<input id="ext" name="ext" class="form-control" type="text" placeholder="Extension" value="<?php echo set_value('ext');?>">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" style="text-align: left;">Address:</label>
<div class="col-md-9">
<input id="idadd" name="add" class="form-control" type="text" placeholder="Enter your corporate address" value="<?php echo set_value('add');?>">
<?php echo form_error('add', '<label class="error">','</label>'); ?>
</div>
</div>
<div class="form-group" id="iddivemplink">
<label class="col-md-3 control-label " style="text-align: left;">Linking:
<span data-toggle="tooltip" data-placement="top" class="glyphicon glyphicon-info-sign" title=" Link your job-openings with techejobs through techejobs linking"></span></label>
<div class="col-md-9">
<input type="checkbox" name="emplink" id="idemplink" value="Y">
Link your job-openings with techejobs through techejobs linking
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" ></label>
<div class="col-md-9">
<label><input type="checkbox" name="tc" id="tc">
I agree to the <a href="<?php echo base_url();?>terms">Terms & Conditions</a></label>
<?php echo form_error('tc', '<label class="error">','</label>'); ?>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-9">
<!--<div class="g-recaptcha" data-sitekey="6Le3lxATAAAAAJ0NWNer-gPm2eZlG-8x2hEykOg7"></div>-->
<div class="g-recaptcha" data-sitekey="6LexRREUAAAAAELhZaiO5FxRbgnyWEwIxFTWeHhE" data-callback="recaptchaCallback"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-3">
<input type="submit" value="Register" name="login" class="btn btn-primary btn-block" id="submitbutton">
</div>
</div>
<div class="form-group">
<label class="col-md-3"> </label>
<div class="col-md-9">Already registered? <a href="<?php echo base_url();?>Employer"> Login Here </a></div>
</div>
<!--f-->
</div>
</div>
<!--panel-->
</div>
</div>
</form>
</div>
<!--right-panel-->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading"><strong>Registration</strong> </div>
<div class="panel-body">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="m-t0">Sign up with the best job board</h3>
<video controls style="width:100%; height: auto; position:relative;">
<source src="<?php echo base_url(); ?>assets/video-tutorials/employer-signup/Employer-Promotional-Video.mp4" type="video/mp4">
<img src="<?php echo base_url(); ?>assets/video/bk_1.jpg" > </video>
</div>
</div>
</div>
<!--panel-->
<ul class="list-unstyled list-group">
<li class="list-group-item">
<h3 class="m-tb0 text-danger">Simplified Talent Management Technology </h3>
<h5 class="m-tb0">FREE Trial for 30 days...</h5>
</li>
<li class="list-group-item"><i class="fa fa-power-off text-danger"></i> Multiple job slots with unlimited posting</li>
<li class="list-group-item"><i class="fa fa-eye text-danger"></i> 100 resume views</li>
<li class="list-group-item"><i class="fa fa-thumbs-o-up text-danger"></i> Candidate marketing</li>
<li class="list-group-item"><i class="fa fa-bars text-danger"></i> Matching, quality & available resumes for all job postings</li>
<li class="list-group-item"><i class="fa fa-envelope-o text-danger"></i> Dedicated customer support</li>
<li class="list-group-item"><i class="fa fa-check-square-o text-danger"></i> Job distribution through network</li>
<li class="list-group-item"><i class="fa fa-lightbulb-o text-danger"></i> Easy multiple location login</li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--content-end-->
</div>
<!--post-resume-end-->
</div>
</div>
<!-- Main Content end -->
<script>
function recaptchaCallback() {
$('#hiddenRecaptcha').valid();
};
Jquery code to add and remove input fields when checkbox is checked :
/*jquery code added to add and remove techejobs linking elements */
var linking = '<div id="iddivco" class="form-group">'+
'<hr style="display:block ; margin-top:-7px;border-top: 1px solid #cabfbf;border-top: 1px solid #cabfbf; width: 589px">'+
'<p style="padding-left:15px">Now, create your company page with ease. If you enable techejobs "Linking”, you need to fill up the details by providing an overview of your organization and a logo, and complete the registration process. After you register, your company profile page will be created.'+
'You can share the link of the page in social media for promotions where all your active jobs will be displayed.</p>'+
'<label class="col-md-3 control-label" style="text-align: left;">Company Overview</label>'+
'<div class="col-md-9">'+
'<textarea id="idco" name="txtcompanyoverview" class="form-control" ></textarea>'+
'</div>'+
'</div>'+
'<div id="iddivlogo" class="form-group">'+
'<label class="col-md-3" style="text-align: left;">Company Logo</label>'+
'<div class="col-md-9">'+
'<input id="idlogo" name="logo" type="file">'+
'</div>'+
'</div>';
$('#idemplink').change(function()
{
if(this.checked)
{
$(linking).insertAfter('#iddivemplink');
}
else
{
$('#iddivco').remove();
$('#iddivlogo').remove();
}
});
Jquery code for the registration form using jquery form validator :
$("form[name='frmempsignup']").validate(
{
ignore: ".ignore",
rules:
{
"company":
{
required:true,
companyname:true
},
"companyweb":
{
required:true,
url:true
},
"email":
{
required: true,
email: true,
//emailval:true,
remote :
{
url: "/techejobs.dev/Employer/unique_email",
type: "post"
}
},
"fname":
{
required:true,
fullnameval:true
},
"passwd":
{
required:true,
minlength:6
},
"cpasswd":
{
required : true,
equalTo: "#idpasswd",
minlength:6
},
"mobno":{required:true},
"ext":
{
digits: true,
maxlength:5
},
"add":{required:true},
"tc":{required:true},
"txtcompanyoverview":
{
required:true,
minlength:120
},
"logo":
{
required:true,
extension:"jpg|jpeg|png|gif",
filesize:1000000
},
"hiddenRecaptcha": {
required: function () {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
},
messages:
{
"company":
{
required:"Please enter company name ",
companyname:"Please enter a proper company name"
},
"companyweb":
{
required:"Please enter the web url of your company",
url:"Please enter a valid url"
},
"fname":
{
required:"Please enter your full name",
fullnameval:"Please enter a proper name"
},
"email":
{
required:"Please enter your corporate email id",
email: "Please use a valid email format",
emailval:"Please enter corporate email id only",
remote:"Email already in use!"
},
"passwd":
{
required:"Please enter your password",
minlength:"Password should have a minimum of 6 characters"
},
"cpasswd":
{
required : "Please confirm your password",
equalTo : "Passwords don't match",
minlength:"Password should have a minimum of 6 characters"
},
"mobno":{required:"Please enter your contact no"},
"ext":
{
digits:"Please enter a proper extension",
maxlength:"Extension cannot be more than 5 digits"
},
"add":{required:"Please enter your address"},
"tc":{required:"Please accept the terms and conditions to continue"},
"txtcompanyoverview":
{
required:"Please enter your Company's overview",
minlength:"Minimum 120 characters are needed"
},
"logo":
{
required:"Please upload your company logo",
extension:"Only JPG,JPEG,PNG, and GIF files are allowed",
filesize:"Filesize must be less than 1 MB"
},
"hiddenRecaptcha":
{
required :"Are you sure you’re not a robot?"
}
},
errorPlacement: function( label, element )
{
if( element.attr( "name" ) === "tc" )
{
element.parent().append( label );
}
else
{
label.insertAfter( element );
}
},
submitHandler: function(form)
{
return true;
}
});
$.validator.addMethod("emailval", function(value,element)
{
var n = value.lastIndexOf('@');
var extension = value.substring(n+1).toLowerCase();
if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"
|| extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
|| extension=="live.com" || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"
|| extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"
|| extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
|| extension=="gmx.net" || extension=="hush.com" )
{
return false ;
}
else
{
return true;
}
},
function()
{
});
/*jquery code added to add and remove techejobs linking elements */
var linking = '<div id="iddivco" class="form-group">'+
'<hr style="display:block ; margin-top:-7px;border-top: 1px solid #cabfbf;border-top: 1px solid #cabfbf; width: 589px">'+
'<p style="padding-left:15px">Now, create your company page with ease. If you enable techejobs "Linking”, you need to fill up the details by providing an overview of your organization and a logo, and complete the registration process. After you register, your company profile page will be created.'+
'You can share the link of the page in social media for promotions where all your active jobs will be displayed.</p>'+
'<label class="col-md-3 control-label" style="text-align: left;">Company Overview</label>'+
'<div class="col-md-9">'+
'<textarea id="idco" name="txtcompanyoverview" class="form-control" ></textarea>'+
'</div>'+
'</div>'+
'<div id="iddivlogo" class="form-group">'+
'<label class="col-md-3" style="text-align: left;">Company Logo</label>'+
'<div class="col-md-9">'+
'<input id="idlogo" name="logo" type="file">'+
'</div>'+
'</div>';
$('#idemplink').change(function()
{
if(this.checked)
{
$(linking).insertAfter('#iddivemplink');
}
else
{
$('#iddivco').remove();
$('#iddivlogo').remove();
}
});
My Research : I have gone through the following questions on Stack Overflow :
1. reCaptcha v2 in conjunction with jQuery-Form-Validator
1 answers
solution1
0 2017-01-11 10:56:31
Solution :
I found that the extension method of jquery form validator,for file upload , was the root cause of the issue . When it was being used , the form validator was not throwing an error when terms and conditions checkbox and/or google recaptcha validation was not being checked .
When I replaced this method with a custom method fileextension using add method in Jquery form validator , the issue was resolved . The form was getting validated and was throwing an error when terms and conditions checkbox and/or google recaptcha validation was not being checked.
My Final Jquery code:
$("form[name='frmempsignup']").validate(
{
ignore: ".ignore",
rules:
{
"company":
{
required:true,
companyname:true
},
"companyweb":
{
required:true,
url:true
},
"email":
{
required: true,
email: true,
emailval:true,
remote :
{
url: "http://expinfo04-pc/techejobs.dev/Employer/unique_email",
type: "post"
}
},
"fname":
{
required:true,
fullnameval:true
},
"passwd":
{
required:true,
minlength:6
},
"cpasswd":
{
required : true,
equalTo: "#idpasswd",
minlength:6
},
"mobno":{required:true},
"ext":
{
digits: true,
maxlength:5
},
"add":{required:true},
"tc":{required:true},
"txtcompanyoverview":
{
required:true,
minlength:120
},
"logo":
{
required:true,
fileextension:true,
filesize:1000000
},
"hiddenRecaptcha":
{
required: function ()
{
if (grecaptcha.getResponse() == '')
{
return true;
}
else
{
return false;
}
},
}
},
messages:
{
"company":
{
required:"Please enter company name ",
companyname:"Please enter a proper company name"
},
"companyweb":
{
required:"Please enter the web url of your company",
url:"Please enter a valid url"
},
"fname":
{
required:"Please enter your full name",
fullnameval:"Please enter a proper name"
},
"email":
{
required:"Please enter your corporate email id",
email: "Please use a valid email format",
emailval:"Please enter corporate email id only",
remote:"Email already in use!"
},
"passwd":
{
required:"Please enter your password",
minlength:"Password should have a minimum of 6 characters"
},
"cpasswd":
{
required : "Please confirm your password",
equalTo : "Passwords don't match",
minlength:"Password should have a minimum of 6 characters"
},
"mobno":{required:"Please enter your contact no"},
"ext":
{
digits:"Please enter a proper extension",
maxlength:"Extension cannot be more than 5 digits"
},
"add":{required:"Please enter your address"},
"tc":{required:"Please accept the terms and conditions to continue"},
"txtcompanyoverview":
{
required:"Please enter your Company's overview",
minlength:"Minimum 120 characters are needed"
},
"logo":
{
required:"Please upload your company logo",
extension:"Only JPG,JPEG,PNG, and GIF files are allowed",
filesize:"Filesize must be less than 1 MB"
},
"hiddenRecaptcha":
{
required :"Are you sure you’re not a robot?",
}
},
errorPlacement: function( label, element )
{
if( element.attr( "name" ) === "tc" )
{
element.parent().append( label );
}
else
{
label.insertAfter( element );
}
},
submitHandler: function(form)
{
return true;
}
});
$.validator.addMethod("emailval", function(value,element)
{
var n = value.lastIndexOf('@');
var extension = value.substring(n+1).toLowerCase();
if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"
|| extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
|| extension=="live.com" || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"
|| extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"
|| extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
|| extension=="gmx.net" || extension=="hush.com" )
{
return false ;
}
else
{
return true;
}
},
function()
{
});
$.validator.addMethod("fileextension", function(value,element)
{
var n = value.lastIndexOf('.');
var extension = value.substring(n+1).toLowerCase();
if (extension == "png" || extension=="gif"|| extension=="jpg"||extension=="jpeg")
{
return true ;
}
else
{
return false;
}
},
function()
{
});
//frmempsignup: name of company : first character alphanumeric , onlyalphanumeric , dot,spaces,& allowed
$.validator.addMethod("companyname", function(value,element)
{
if (/^[a-zA-Z0-9][a-zA-Z0-9. &,-_',]{1,256}$/.test(value))
{
return true;
}
else
{
return false;
}
},function()
{
});
//frmempsignup :full name : first character alpha, only alphanumeric and spaces allowed
$.validator.addMethod("fullnameval", function(value,element)
{
if (/^[a-zA-Z][a-zA-Z0-9 ]{0,256}$/.test(value))
{
return true;
}
else
{
return false;
}
},function()
{
});
//frmempsignup : company url : only valid urls allowed , http://,https://,wwww,ftp://
$.validator.addMethod("urlval", function(value,element)
{
//"^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)"
//var urlregex = new RegExp("^(http:\/\/|https:\/\/|ftp:\/\/|www.){1}([0-9A-Za-z]+\.)");
var urlregex = new RegExp("^(http:\/\/|https:\/\/|ftp:\/\/|www.)([0-9A-Za-z]+\.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mn|mn|mo|mp|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|nom|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ra|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw|arpa)(:[0-9]+)?((\/([~0-9a-zA-Z\#\+\%@\.\/_-]+))?(\?[0-9a-zA-Z\+\%@\/&\[\];=_-]+)?)?))\b/imuS");
if (urlregex.test(value))
{
return true;
}
else
{
return false;
}
},function()
{
});
//frmempsignup : company logo : filesize must be less than 1 MB
$.validator.addMethod('filesize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
google recaptcha and form not working
jQuery email validation and recaptcha is not working in a two stage form submission process
PHP Form, MailFonction and Google reCaptcha Validation Issue
WordPress Contact Form Validation Including Google reCaptcha Validation Issue
reCAPTCHA and JS form validation
reCaptcha / Form Validation
jQuery validation on form not working
Google reCaptcha with php validation
Using Recaptcha with Jquery Validation
Can submit contact form without google recaptcha v2 validation
Related Tags