Extending jQuery Form Validation Script for new form fields
- by user982124
I have a simple HTML form that originally was a series of Questions (A1 to A5 and B1 to B3) with yes/no radio buttons like this:
<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>
The user could only answer either the A series of questions OR either the B series of questions, but not both. Also they must complete all questions in either the A or B series.
I now have an additional series of questions - C1 to C6 - and need to extend my validation scripts to ensure the user enters either A, B or C and answers all questions within each series.
My original script for just the A and B looks like this:
$(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;
}
This worked well but I'm completely stuck at extending it to include the C series. I now have to check that the user hasn't answered any A and B, A and C and B and C questions. Everything I've tried fails to validate. Here's where I'm at right now with my new script:
$(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;
}
Anyone see what I'm doing wrong?
