Form Validation - Checkboxes

Shove IT

04-11-2003, 02:47 PM

Hi, I'm pretty new to JavaScript and I have a few questions regarding form validation, esp. checkboxes:

1. The system I'm working on has a screen where the user is required to select exactly 2 checkboxes out of 5. These checkboxes correspond to records pulled from a database. These threads have been of some help but I guess I don't know enough to modify them to make it work for my situation:

http://www.codingforums.com/showthread.php?s=&threadid=16608

http://www.codingforums.com/showthread.php?s=&threadid=8558

Right now the page only checks for the maximum number ( > 2) and displays an alert. I just need help making sure the minimum checked is 2 records. I'm thinking this check has to be on the button that takes the user to the next page?

2. If this is completed successfully (2 records checked), the user will go to a screen that requires that they input some information into 2 text boxes and click a button to do the same for the second record checked from the previous screen. However, if the information is unavailable, they can click a checkbox marked "Unavailable". What I want to do is display a yes/no? box if they check the box that warns them that any information entered in the text box will not be recorded to the database. The message box will either allow them to continue to the next record or uncheck the box and let them enter the data in the text box.

Hopefully this makes sense. If anyone is willing to help on either of these I can send you a link to the site I have so far. It requires a password and I'd rather not give it out on here, although it is all dummy data at this time. Thanks!

Weirdan

04-11-2003, 03:27 PM

// insert this functions into <head> part
function checkForm(frm)
{
var iChecked=countChecked(frm);
if (iChecked==iBoxmax) return true;
alert("You have to select exactly "+iBoxmax+" records!");
return false;
}

function countChecked(frm)
{
var oEl,e=0, iChecked=0;
while (oEl = frm.elements[e++]) if (oEl.type == 'checkbox' && oEl.checked) ++iChecked;
return iChecked;
}
....
<FORM name='frmChecker' action='checker2.asp' method='post' onsubmit='return checkForm(this)'>

Shove IT

04-11-2003, 03:33 PM

Weirdan, Thanks man! That's exactly what I was looking for.

Weirdan

04-11-2003, 03:50 PM

Shove IT

04-11-2003, 06:49 PM

That does what I want but there are three exceptions: I think its just adding an if statement but my logic isn't working today.

1. If the user enters a number in both text boxes, no message should be displayed and they should go to the next record.

2. If the user only checks "Unavailable" with no quantities entered, then the same ok box should be displayed or something that say's "Are you sure?"

3. If the user enters numbers in either or both boxes and checks unavailable, if they click ok to proceed, can i make the values of each text box = ""?

Thanks for all your help so far. I really appreciate it.

Weirdan

04-14-2003, 09:16 AM

Shove IT

04-14-2003, 03:25 PM

Weirdan, I'm still having trouble with the checkbox, it seems like this statement is always true:

if (form.check1.value) {

could I just have a confirm pop up right when they check the box and then submit the form if they click ok?

Thanks

Ok I think I got it now:

function isOK(form) {

var formLength = form.length;
for (var e=0; e<formLength; ++e)
if (form.elements[e].type == 'checkbox' & form.elements[e].checked) {
var abandon=confirm("Are you sure you want to continue?\nIf you press OK, no quantities will be submitted.");
if(abandon) form.q1.value=form.q2.value="";
return abandon;
}

if (isValid(form.q1.value) == false || validateNmbr(form.q1.value) == false) {
alert("Please enter the appropriate quantity for this field.");
form.q1.focus();
return false;
}

if (isValid(form.q2.value) == false || validateNmbr(form.q2.value) == false) {
alert("Please enter the appropriate quantity for this field.");
form.q2.focus();
return false;
}
return true;
}

Thanks for all your help on this!!!

Weirdan

04-15-2003, 09:50 AM

function isOK(form) {
var formLength = form.length;
for (var e=0; e<formLength; ++e)
if (form.elements[e].type == 'checkbox' & form.elements[e].checked)
{
var abandon=confirm("Are you sure you want to continue?\nIf you press OK, no quantities will be submitted.");
if(abandon) form.q1.value=form.q2.value="";
return abandon;
}
//.....

It will work for you if you have only 1 checkbox in the form.
If you have unavailable checkbox first, I mean

if (form.check1.value) {

What browser do you use? Such a code works quite well in ie6 (I haven't checked it in other browsers).

Shove IT

04-15-2003, 01:01 PM

I'm using IE6 also. I think what I have is working so I'll probably leave it since we have to install it later this week :eek: !

Do you know if the "form.check1.value" will check if the box is checked or just check if there is a value assigned to it? It seems like when I run that line of code the value is always 1, which is what I assigned to it in the HTML. I'll look into it. Thanks again.