【发布时间】:2017-01-10 18:19:42
【问题描述】:
我的问题:
我有一个注册表单作为 Codeigniter 中的一个视图,我已经使用 Jquery 表单验证对其进行了客户端验证。表单验证对我来说工作得很好。
但是,我在使用此表单时遇到以下问题:
1.Recaptcha 验证: 我在此表单中有一个链接复选框,允许用户填写更多详细信息并上传他的公司徽标。当用户单击此复选框时,jquery 代码只需添加一个文本框和一个文件上传选项来上传公司徽标。(请参阅我的 jquery 代码以在用户选中复选框时添加链接元素)强>
如果用户没有点击这个复选框,并且填写了所有的输入字段并且没有选择recaptcha验证,然后按下提交按钮,jquery表单验证器会抛出一个错误信息并提示用户选择recpatcha验证。
但是,当用户点击链接选项复选框,填写所有输入字段而不选择重新验证验证并按下提交按钮时,页面只是刷新而不给出错误消息。如果用户没有选择 recaptcha 验证,jquery 表单验证器最好抛出错误消息并禁止提交页面。
只有当用户选中链接复选框时才会出现问题。
2.条款和条件复选框验证:
如果用户没有点击链接复选框选项,填写所有输入字段而不点击该复选框,然后按下提交按钮,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();
}
});
我的研究: 我在 Stack Overflow 上解决了以下问题:
1.reCaptcha v2 in conjunction with jQuery-Form-Validator
【问题讨论】:
标签: php jquery codeigniter recaptcha