我的问题：
我有一个注册表单作为Codeigniter中的视图，我已使用Jquery Form验证执行了客户端验证。表单验证对我来说非常合适。
但是，我对此表单存在以下问题：
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
答案 0 :(得分：0)
解决方案：
我发现jquery表单验证器的扩展方法，对于文件上传，是问题的根本原因。当它被使用时，表格验证器在没有检查条款和条件复选框和/或谷歌重访验证时没有抛出错误。
当我使用Jquery表单验证程序中的add方法使用自定义方法fileextension替换此方法时，问题已得到解决。该表单已经过验证，并且在未检查条款和条件复选框和/或google recaptcha验证时抛出错误。
我的最终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: "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}');
});