我有一个简单的HTML表单,最初是一系列问题(A1至A5和B1至B3),带有“是/否”单选按钮,如下所示：
<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>
用户只能回答A系列问题或B系列问题,但不能全部回答.他们还必须完成A或B系列的所有问题.
现在,我还有其他一系列问题-C1至C6-并且需要扩展我的验证脚本,以确保用户输入A,B或C并回答每个系列中的所有问题.
我原来的A和B脚本如下所示：
$(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;
}
这很好用,但是我完全坚持将其扩展到C系列.现在,我必须检查用户是否未回答任何A和B,A和C以及B和C问题.我尝试过的所有内容均无法验证.这是我现在使用新脚本的位置：
$(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 or C
if(isAorBorC()){
$("#error").html("Please complete A or B or C, not both");
//alert("please complete A or B, not both");
return false;
};
// all A's or all B's or all C's
if(allAorBorCChecked()){
$("#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 isAorBorC(){
var OK = false;
var Achecked = false;
var Bchecked = false;
var Cchecked = 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(theChar == "B" && this.checked && !Achecked){
Bchecked = true;
}
if(theChar == "C" && this.checked && !Achecked){
Cchecked = true;
}
if(Achecked && theChar == "B" && !Bchecked){
if(this.checked){
Bchecked = true;
}
}
if(Achecked && theChar == "C" && !Cchecked){
if(this.checked){
Cchecked = true;
}
}
if(Bchecked && theChar == "C" && !Cchecked){
if(this.checked){
Cchecked = true;
}
}
if (Achecked && Bchecked){
OK = true;
}
if (Achecked && CBchecked){
OK = true;
}
if (Bchecked && Cchecked){
OK = true;
}
});
return OK;
}
function allAorBorCChecked(){
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;
}
});
}elseif{
// 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;
}
}else{
// set the input to C
$("#type").val("C");
// check _all_ c's are checked
var thisName;
var thisChecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
var checked = this.checked;
if (theChar == "C"){
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;
}
有人看到我在做什么错吗？
解决方法:
首先,我认为最好的可用性是通过使表格更容易出错而使它更易于使用.如果您使用的是javascript& jQuery,您也可以对其进行设置,以便用户必须先选择一个部分,然后才能选择其中的任何项目.您可以轻松地支持显示所有问题的要求,但是当计算机可以很容易地阻止用户执行不必要的工作(例如错误地填写多个部分)时,这对用户不利.
如果您想看看可能会是什么样子,请发表评论,我会为您解决问题的.
同时,按照您当前的设计,这里是a fiddle demonstrating one possible technique.它将适用于任意数量的部分.
请查看该代码以获取完整列表,但以下是繁重的验证脚本.
function validate(ev) {
var sectionsTouched = $('ol').has(':checked'),
inputs = {},
errorMessage = '';
if (sectionsTouched.length === 0) {
errorMessage = 'Please check something before submitting.';
} else if (sectionsTouched.length > 1) {
errorMessage = 'Please complete only one of sections ' + namesCommaDelimited(seriesNames(), 'or') + '.';
} else {
sectionsTouched.find('input').each(function(i, e) {
var me = $(e), name = me.attr('name');
inputs[name] = !!inputs[name] || me.is(':checked');
});
$.each(inputs, function(k, v) {
if (!v) {
errorMessage = 'Please complete all questions in your selected section.';
}
return v;
});
}
if (errorMessage !== '') {
$('#error').html(errorMessage);
ev.preventDefault();
return false;
}
return true;
}
基本逻辑：如果没有任何节有选中的项目,则显示相应的消息.如果有多个部分具有选中的项目,则太多的部分都有答案.如果只有一个部分有答案,请遍历输入,并收集对相应控件名称进行检查的输入的列表.如果存在任何未选中的名称,则不选中某个控制组,并显示相应的消息.
我必须采取一些自由措施,以构建一种足以满足要求的表格,以进行适当的演示.看起来像这样：
我希望这有帮助！
附言为了完整起见,我想提到一些样式方面的考虑：
>当发现自己在重复代码时,请尝试将重复内容抽象化-创建一个函数或声明一个变量.例如,不要多次执行$(‘#error’).html(),而是先设置一个值,然后仅对html进行一次设置.
>尝试编写不秘密依赖文档结构的代码,例如表单字段名称采用特定格式(在某个位置具有特定字符).您的JavaScript严重依赖于charAt(8)函数返回’A’或’B’,这使它变得脆弱-如果其他人(甚至您将来的自己)不小心破坏了控件名称该怎么办？突然,JavaScript会中断,并且两者之间的链接不明显.您可以对其进行编码,因此,只要您有一些可以指示每个单独部分的选择器,您甚至无需知道哪个部分.使用类名是可以的,因为javascript中的类名显然必须与html中的类名匹配.
1.第一步 设置响应头 header('Access-Control-Allow...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...