所有我正在建立一个竞赛页面并且我在验证方面遇到了麻烦，我们要求输入名字，姓氏＆amp;如果你想推荐一位朋友的电子邮件，你点击复选框，显示另一个表格，你输入你的朋友的详细信息，并再次推荐一个朋友，所以出现第三个表格，等等。
现在，在验证表单时我试图基本上说如果选中复选框，则验证字段形成1＆amp; 2，如果选中checkbox2，则验证字段1,2＆amp; 3，最后如果复选框3，则验证字段1,2,3＆amp; 4
我试过用jQuery if语句看看下面的内容，onSubmit它从这个函数返回一个true或false值：
function validateForm() {
if( $('#checkbox').is(':checked')) {
if( $('#checkbox2').is(':checked')) {
{
var x = document.forms["competition"]["fname"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["lname"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
$('input#email').css("border","solid red 2px");
console.log('Please enter a valid e-mail address.');
return false;
}
var x = document.forms["competition"]["f_name"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["l_name"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('se_email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
console.log('Please enter a valid e-mail address.');
$('input#se_email').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["fr_name"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["fr_lname"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('fr_email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
console.log('Please enter a valid e-mail address.');
$('input#fr_email').css("border","solid red 2px");
return false;
}
} else {
var x = document.forms["competition"]["fname"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["lname"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
$('input#email').css("border","solid red 2px");
console.log('Please enter a valid e-mail address.');
return false;
}
var x = document.forms["competition"]["f_name"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["l_name"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('se_email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
console.log('Please enter a valid e-mail address.');
$('input#se_email').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["fr_name"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["fr_lname"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('fr_email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
console.log('Please enter a valid e-mail address.');
$('input#fr_email').css("border","solid red 2px");
return false;
}
}
} else {
var x = document.forms["competition"]["fname"].value;
if (x == null || x == "") {
$('input#fname').css("border","solid red 2px");
return false;
}
var x = document.forms["competition"]["lname"].value;
if (x == null || x == "") {
$('input#lname').css("border","solid red 2px");
return false;
}
var email = document.getElementById('email').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailFilter.test(email)) {
console.log('Please enter a valid e-mail address.');
return false;
}
}
}
非常感谢任何帮助。
此处可以使用演示http://pi.mrjoshfisher.com/comp/
答案 0 :(得分：0)
如果您只是隐藏和显示（而不是创建）第2个，第3个或第n个元素，那么只需在display属性更改后向这些div中的元素添加或删除类，比如说validateable上课。
您确实不需要检查表单提交上的复选框值，只需确保每次复选框更改其值时绑定change方法并添加validateable类到该组中的适当元素。然后在提交时，您抓住所有validateable输入并检查它们是否为空。
我在代码中添加了this jsfiddle和一个演示。请注意，我更改/简化了一些内容。