0
我有3组的问题一个HTML表单，用户可以回答yes或no来如下：条件表单验证
A1 A2 A3 A4 A5
OR
B1 B2 B3
或
C1 C2 C3 C4 C5 C6
用户可以选择接听要么所有的“A”的问题，所有的“B”的问题或所有的“C”的问题，但它们不能回答一个以上的组。无论选择哪一组，他们都必须回答同一组中的所有问题（即所有“A”或所有“B”或所有“C”问题 - 他们不能回答问题）。
这里的窗体的HTML：
<form method="post" action="process.php" id='editRecord'>
<table border="1" class="record">
<tr>
<td width="88%" valign="top" class="field_name_left">A1</td>
<td width="12%" valign="top" class="field_data">
<input type="radio" name="CriteriaA1" value="Yes">Yes<input type="radio" name="CriteriaA1" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA2" value="Yes">Yes<input type="radio" name="CriteriaA2" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A3</td>
<td valign="top" class="field_data"> <input type="radio" name="CriteriaA3" value="Yes">Yes<input type="radio" name="CriteriaA3" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A4</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA4" value="Yes">Yes<input type="radio" name="CriteriaA4" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A5</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA5" value="Yes">Yes<input type="radio" name="CriteriaA5" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left">B1</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaB1" value="Yes">Yes<input type="radio" name="CriteriaB1" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left">B2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaB2" value="Yes">Yes<input type="radio" name="CriteriaB2" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left">B3</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaB3" value="Yes">Yes<input type="radio" name="CriteriaB3" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C1</td>
<td width="12%" valign="top" class="field_data">
<input type="radio" name="CriteriaC1" value="Yes">Yes<input type="radio" name="CriteriaC1" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC2" value="Yes">Yes<input type="radio" name="CriteriaC2" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C3</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC3" value="Yes">Yes<input type="radio" name="CriteriaC3" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C4</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC4" value="Yes">Yes<input type="radio" name="CriteriaC4" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C5</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC5" value="Yes">Yes<input type="radio" name="CriteriaC5" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">C6</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaC6" value="Yes">Yes<input type="radio" name="CriteriaC6" value="No">No</td>
</tr>
<tr class="submit_btn">
<td colspan="3"> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<div id="buttons" >
<input type="submit" name="-edit" value="Continue">
<input type="reset" name="reset" value="Reset">
</div>
<div id="error"></div> </td>
</tr>
</table>
</form>
我还设置一个的jsfiddle在：
http://jsfiddle.net/fmdataweb/pEETU/2/
我想补充一些客户端验证检查，当用户点击继续按钮，他们确实回答了一个组中的所有问题，并没有回答其他组的任何问题。
我以前有过这种验证，当表单只有A或B选项 - 表单现在有C选项，我需要更新Javascript，但我迄今尝试过的一切都失败了。
下面是对原来的A和B选项工作的JavaScript：
$(function() {
$("#editRecord").submit(function(){
// is anything checked?
if(!checkEmpty()){
$("#error").html("Please check something before submitting");
//alert("nothing Checked");
return false;
}
// Only A _OR_ B
if(isAorB()){
$("#error").html("Please complete A or B, not both");
//alert("please complete A or B, not both");
return false;
};
// all A's or all B's
if(allAorBChecked()){
$("#error").html("It appears you have not completed all questions");
//alert("missing data");
return false;
};
if(haveNo()){
// we're going on, but sending "type = C"
}
//alert("all OK");
return true;
});
});
function checkEmpty(){
var OK = false;
$(":radio").each(function(){
if (this.checked){
OK = true;
}
});
return OK;
}
function isAorB(){
var OK = false;
var Achecked = false;
var Bchecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
// if we have an A checked remember it
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
if(Achecked && theChar == "B" && !Bchecked){
if(this.checked){
Bchecked = true;
}
}
if (Achecked && Bchecked){
OK = true;
}
});
return OK;
}
function allAorBChecked(){
var notOK = false;
var Achecked = false;
$(":radio").each(function(){
// skip through to see if we're doing A's or B's
var theChar=this.name.charAt(8);
// check the A's
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
});
if(Achecked){
// set the input to A
$("#type").val("A");
// check _all_ a's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "A"){
if (this.name == thisName && !thisChecked){
// Yes wasn't checked - is No?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}else{
// set the input to B
$("#type").val("B");
// check _all_ b's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "B"){
if (this.name == thisName && !thisChecked){
// A wasn't checked - is B?
if(!checked){
notOK = true;
}
}
thisChecked = checked;
thisName = this.name;
}
});
}
return notOK;
}
function haveNo(){
var thisName;
var notOK = false;
$(":radio").each(function(){
var checked = this.checked;
if (this.name == thisName){
//Is this checked
if(checked){
notOK = true;
$("#type").val("C");
}
}
thisName = this.name;
});
return notOK;
}
它可以轻松地用jQuery来完成，而验证插件不是必须的。我建议你至少尝试解决方案，然后或许有人会帮助解决疑惑。 不要指望人们为你编写完整的代码。 – 5hahiL
你可能不应该把你的表格放在这样的表格中。你的表单没有填充表格数据，称它是一个糟糕的语义。 –
我与沙希尔一起，自己写点东西然后问。至少尝试一下...我会用jQuery，不是那么复杂。 – Alvaro