A little form validation

Topic

New Reply

I have a form element — two Radio Buttons with the same name — and I want to put in validation to keep the form from submitting if the VALUE of the Radio Button pair is nothing (== “” in javascript) — and I’d like to set focus on the radio button group as well. However, I can’t get the thing to fire. Is there an issue with addressing Radio Button groups? I’d think there would be because it’s not clear how you set focus to a group; if that’s a problem I can let it pass but I can’t get the script to do anything one way or the code (form.Par_Fam_In_Agreement.value == “”) with respect to the firing an event. No problems with text boxes and drop-downs, tho.

Reply | Quote

Replies

Think of them as checkboxes and interrogate whether any are “checked”. If there’s only two:

if ((document.form.radio[0].checked != true) && (document.form.radio[1].checked != true))
{
alert(“pick a button, any button”);
return (false);
}

As for setting focus, I think you could set focus on one of the controls individually, but I haven’t tried it out.

Reply | Quote

i don’t think that’ll work, simply because radio buttons are like checkboxes: unless they are checked, no value is passed and you can’t validate for them. I tried to do this using the following code: document.form.radio(20).checked != True and nothing happened. perhaps I am missing something here as in the right way to reference a form element in the DOM syntax.

in this case, I don’t want to set a default. but, I thought this would be a problem and I told the person requesting this functionality that it might not be possible. i suppose this makes sense: like checkboxes, radio buttons represent optional data and you’d expect that sometimes a user wouldn’t need to select one. If I replace the data element with a drop-down box I have to set a default value anyway as drop-downs don’t permit a blank value as a default. so, I just put in a test line in the preview.asp page to notify the user that they have not indicated a Yes or No on the question. For my purposes, this also works.

BTW, is there an issue using more than one javascript function for ONSUBMIT? I find that the validation code doesn’t fire if I put more than one ONSUBMIT parameter in the block.

Reply | Quote

Those names were placeholders. Try this page:

function frmTestVal()
{
	if ((document.frmTest.R1[0].checked != true) &&
		 (document.frmTest.R1[1].checked != true))
	{
		alert("pick a button, any button");
		return (false);
	}
	else
	{
		alert("good work, mate");
		return (false);
	}
}






Test Validation

  


  

Button One
  

Button Two
  


    

As for the number of event handlers, no, you really can’t have more than one onSubmit – you just have to make it nice and complicated.

Reply | Quote

I tried out your solution some time ago and went on to other things to get the overall project out the door. Now that most of it is in the finishing stages, I’d like to iron out this radio button validation problem.

Some remarks:

I have a piece of code that evaluates for a Staffing Case Number that works and that is more important than validating the Radio Buttons but I think I should be able to do both. I think it’s a matter of some nesting Ifs and conditions, etc.

Anyhoo, one of the problems with respect to your suggestion is the radio buttons i am working with are ‘true’ radio button pairs, meaning, although there’s two of them, then have the same NAME. This is necessary to align the form data with the underlying DB. In your suggested solution, you check for either of two different radio buttons by their names. I do have a Yes/No pair so the situation does apply in a manner.

Anyhow, I tried this:

As you can see, the script runs one test separately from the other and, at least, the first chunk works. I tried deleting the Staffing Form validation chunk and the Radio Button script doesn nada. So it’s not just a matter of not embedding one test in another but, possibly, the system doesn’t know what the heck Par_Fam_In_Agreement *is*. Any suggestions?

TIA

Reply | Quote

> you check for either of two different radio buttons by their names

Not so, I treat two radio buttons with the same name as a zero-based array; notice the bracketed array counter after the button name. Here, I’ll make it bigger and easier to see:

if ((document.frmTest.R1[0].checked != true) &&
(document.frmTest.R1[1].checked != true))

…

Button One

Button Two

Believe me now?

Reply | Quote

ok, smart guy…

I guess I shouldn’t try to read code late in the day.

BUT I can’t get the vefication code on the radio buttons to work and there’s small little detail-ey things that seem to make a big difference. Anything I try to do re. the radio buttons gives me a little Caution-Triangle ‘Error on page’ notice and the script doesn’t work. I tried a variety of things but here’s the detail-ey things that are puzzling.

WORKING VERFICATION – a text box:

This script will ONLY fire if the POST section for the form declaration says

onsubmit = “return validateCaseNumber(this)”

Trying the simplist thing possible on the working script, viz. replacing if (form.StaffingCaseNumber.value==””) with if (form.Par_Fam_In_Agreement[0].Checked != True) still causes an error in page notice. I’ve also tried !== True in some iterations of testing but that didn’t seem to make a difference.

Javascript seems really tetchy with verification code and, to make things more frustrating, IE 6 refuses to refresh properly when you change the javascript — I have to close it completely and then re-open to see any changes in the javascript. So, anyway… I feel like I am flailing around right now and it’s a mystery to me why the POST statement can’t be onsubmit = “validateCaseNumber();” I don’t know Javascript well at all so it does get murky. Perhaps I need to be declaring a version of Javascript??

Reply | Quote

You’re absolutely right about needing “return validationFunctionName(this)” in the onSubmit handler; I cheated in my example by having no action parameter.

You shouldn’t need to declare a version of JavaScript for this kind of stuff.

Not sure what you can learn from a yellow triangle. Do you have script error notifications turned on? If not, you really can’t tell which line of the script is generating the error. (Well, I suppose if you ran it in the de######, maybe, I’m not sure.) It’s one of the Tools>Internet Options…>Advanced settings (see below).

Can you post the page (stripped down if needed) in a ZIP archive for further examination?

Reply | Quote

I don’t learn much from the little triangle except that IE has a problem with a script — and, typically, the page will load and the script just doesn’t fire. As far as my Advanced Settings go, unfortunately, I am in a work enviornment and downloaded IE 6 (which I don’t like) and somehow the security settings on my machine don’t allow me to change any of the advanced settings (like, for example, disabling Show Friendly HTTP Errors) — so, even tho my settings are not as you indicated, i can’t do anything about it.

Anyhoo, here’s a stripped-down version of the webpage. The real page has A LOT of form field elements and, depending on settings from the referring form, may or may not display a couple more sets of questions. That’s why it’s .asp not .html

The stripped down page has working Verification for the Staffing Case Number that fires with an onblur() or submit() action. The two radio buttons are what I am trying to fold into the Submit() code once I can figure out how to get the page to ‘see’ them at all.

thanks for your help — i’ll keep banging away on my end.

Reply | Quote

PROGRESS

After much fiddling about I have a working verification script for my radio buttons.

Lessons Learned:
1) Refer to the object on your page with document.[form name].[control name ([control array index]).[action] — using form doesn’t seem to work well.
2) If you want to keep a submission from occurring you need to specify the POST action like so: onsubmit = “return validateCaseNumber();”

Now, having figured all this out, the real fun begins: resting for the textbox AND/OR the radio buttons in the submit script with alert boxes tailored to whatever conditions apply.

Ah well, it’s a good day for it too — almost everyone’s out of the office.

Reply | Quote

PROBLEM SOLVED

This turned out to have a lot of little details tro track, but in the end this is what I came up with:

function validateSubmit(form)
{
if (form.StaffingCaseNumber.value==””){
alert (“You must specify a Case Number to submit the data.”)
document.Initial_Staffing.StaffingCaseNumber.focus()
return false
}
if ((document.Initial_Staffing.Par_Fam_In_Agreement[0].checked != true) &&
(document.Initial_Staffing.Par_Fam_In_Agreement[1].checked != true))
{
alert(“Please specify whether parent or family or guardian is in agreement with the service plan”);
return false
}
return true
}

The script must have (form) in the function specification and the Staffing Case Number textbox must be referenced as a form.[control name] etc.; the radio buttons must be referenced as document.[control name] etc. Also the FORM declaration line must read onsubmit = “return validateSubmit(this)” to work. Anything else and things don’t function correctly.

If i try to set focus to the radio buttons the script fails. If I *look* at it wrong, it fails. Silly Javascript! I would like to set focus to the radio buttons because the form is really big and I can’t expect people to know where to go to clear the alert box, so will keep banging away. However, it’s working much better now.

Thanks for all your help!!

Reply | Quote