0
Моя проблема:проверка Recaptcha Google не работает с формой JQuery валидатор
У меня есть регистрационную форму, как вид в Codeigniter, для которого я выполнил проверку на стороне клиента с помощью проверки формы Jquery. Валидация формы работает отлично для меня.
Однако, у меня есть следующие проблемы с этой формой:
1.Recaptcha проверки: У меня есть связующая флажок в таком виде, который позволяет пользователю заполнить некоторые подробности и загрузить его логотип компании , Когда пользователь нажимает на этот флажок, код jquery просто добавляет текстовое поле и параметр загрузки файлов для загрузки логотипа компании. (см моего Jquery код для добавления элементов соединительных, когда пользователь проверяет флажок)
Если пользователь не нажмет на этом флажке, и заполняет все поля ввода без выбора проверки ReCaptcha и пресса представить , средство проверки формы jQuery выдает сообщение об ошибке и предлагает пользователю выбрать проверку recpatcha.
Однако, когда пользователь нажимает на флажок для связывания опции, заполняет все поля ввода без выбора проверки ReCaptcha и нажимает кнопку отправить, страница просто обновляется, не давая сообщение об ошибке. Валидатор формы jquery должен идеально выдать сообщение об ошибке и запретить отправку страницы, если пользователь не выбирает проверку recaptcha.
Проблема возникает только тогда, когда пользователь проверяет флажок для ссылки.
2.Terms и условие Флажок проверка:
Если пользователь не нажмет на , связывающей параметр флажок, заполняет все поля ввода, не нажимая на этом флажке, и нажимает кнопку отправки, средство проверки формы jQuery выдает сообщение об ошибке и предлагает пользователю установить флажок условий и условий.
Однако, когда пользователь проверяет флажок привязки, заполняет все поля ввода, включая проверку верности, но не проверяет флаги условий и условий и нажимает кнопку отправки, страница просто обновляется, не вызывая сообщение об ошибке. Валидатор формы jquery должен в идеале выдать ошибку, предлагая пользователю установить флажок условий и условий.
Любая помощь по этому вопросу будет оценена по достоинству.
Мой код:
Регистрационная форма:
<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 добавлять и удалять поля ввода, когда флажок:
/*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 со де для регистрации формы с помощью формы JQuery валидатора:
$("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();
}
});
Мои исследования: Я прошел через следующие вопросы на переполнение стека:
1. reCaptcha v2 in conjunction with jQuery-Form-Validator
2. New reCaptcha with jQuery Validation Plugin
3. how to test Recaptcha with jQuery Validate plugin