PDA

View Full Version : Checkform radio group validation



marynorn
06-25-2008, 03:01 PM
I have five radio groups, all yes/no. I don't want to have any buttons initially selected, but I do want it be impossible to submit the form without checking one of the buttons. I've been playing around with various checkform values, but so far I have nothing that works.

My form:


<form action="consult_ty.php" method="post" name="form1" id="form1" onSubmit="return checkForm(this);">
<p>1. *question goes here*</p>
<p>
<label>
<input name="1" type="radio" id="1_0" onclick="MM_showHideLayers('1a','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="1" type="radio" id="1_1" onclick="MM_showHideLayers('1a','','show')" value="No" />
No</label>
<label></label>
<br />
</p>
<p>1a. If not, why not?</p>
<p>
<textarea name="1a" id="1a" cols="60" rows="5"></textarea>
</p>

...and so on down the page

And my inept attempt at checkform:



<script language="JavaScript"
type="text/javascript">
function checkform(form1) {
for (var i=0; i<form1.elements["1"].length;
i++) {
var radio = form1.elements["1"][i];
if (radio.checked) {
return true;
}
}
window.alert("Please select 'Yes' or 'No'!");
form1.elements["1"][0].focus();
return false;
}
</script>

rangana
06-26-2008, 02:12 AM
function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
{if(radio[i].type=='radio'&&radio[i].checked==true) bool=true}
return bool;}

marynorn
06-26-2008, 08:06 AM
Thank you! That stops the form from submitting perfectly. Is there any way to get a 'please choose yes or no for every question' alert to show up as well?

jscheuer1
06-26-2008, 08:15 AM
function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
{if(radio[i].type=='radio'&&radio[i].checked==true) bool=true}
return bool;}


That looks like it would require only one button on the page be checked. I may have missed something though.

rangana
06-26-2008, 08:20 AM
Thank you! That stops the form from submitting perfectly. Is there any way to get a 'please choose yes or no for every question' alert to show up as well?

Add the highlighted:


function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
{if(radio[i].type=='radio'&&radio[i].checked==true) {
alert('Please choose year or no for every question');bool=true}}
return bool;}


@jscheuer1,
I don't know, I was just basing from his requirement:


but I do want it be impossible to submit the form without checking one of the buttons

I'm not always good at grasping english, but that's what I understand (at least one should be selected).

marynorn
06-26-2008, 09:00 AM
Ah, yes. As long as one radio button is selected, the form submits. I've got five radio groups, all of which need to be clicked on.

But it's a huge step closer than I was yesterday, so thank you. Can it be modified for each radio group?

rangana
06-26-2008, 09:14 AM
The one I've provided does'nt check for five radio groups. It only check if (at least) one radio button is selected, I'm referring to the whole radio buttons.

There should be slight modification with the code, but we can't start whipping one for you since we're not aware how your markups is constructed.

Up your (complete) HTML so we could start playing on it.

marynorn
06-26-2008, 12:05 PM
Oh boy, the whole page? That's a lot of code. I'd rather just put in the form and the head, if that's okay? There's a ton of completely irrelevant stuff on there.

Form:


<form action="consult_ty.php" method="post" name="form1" id="form1" onSubmit="return checkForm(this)">
<p>1. *insert question*?</p>

<p>
<label>
<input name="1" type="radio" id="1_0" onclick="MM_showHideLayers('1a','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="1" type="radio" id="1_1" onclick="MM_showHideLayers('1a','','show')" value="No" />
No</label>
<label></label>
<br />
</p>


<p>1a. If not, why not?</p>

<p>
<textarea name="1a" id="1a" cols="60" rows="5"></textarea>
</p>

<p>---</p>

<p>2. *insert question*? </p>

<p>
<label>
<input name="2" type="radio" id="2_0" onclick="MM_showHideLayers('2a','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="2" type="radio" id="2_1" onclick="MM_showHideLayers('2a','','show')" value="No" />
No</label>
<br />
</p>

<p>2a. If not, why not?</p>

<p>
<textarea name="2a" id="2a" cols="60" rows="5"></textarea>
</p>

<p>---</p>

<p>3. *insert question*? </p>

<p>
<label>
<input name="3" type="radio" id="3_0" onclick="MM_showHideLayers('3a','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="3" type="radio" id="3_1" onclick="MM_showHideLayers('3a','','show')" value="No" />
No</label>
<br />
<br />
</p>

<p>3a. If not, why not?</p>

<p>
<textarea name="3a" id="3a" cols="60" rows="5"></textarea>
</p>

<p>---</p>

<p>4. *insert question*?</p>

<p>
<label>
<input name="4" type="radio" id="4_0" onclick="MM_showHideLayers('4a','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="4" type="radio" id="4_1" onclick="MM_showHideLayers('4a','','show')" value="No" />
No</label>
<br />
</p>

<p>4a. If not, why not?</p>

<p>
<textarea name="4a" id="4a" cols="60" rows="5"></textarea>
</p>

<p>---</p>

<p>5. *insert question*? </p>

<p>
<label>
<input name="5" type="radio" id="5_0" onclick="MM_showHideLayers('5a','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="5" type="radio" id="5_1" onclick="MM_showHideLayers('5a','','show')" value="No" />
No</label>
<br />
</p>

<p>5a. If not, why not?</p>

<p>
<textarea name="5a" id="5a" cols="60" rows="5"></textarea>
</p>
<p><br />
</p>

<p>---</p>

<p>6. *insert question*
</p>

<p>
<label>
<input name="5d" type="radio" id="5d_0" onclick="MM_showHideLayers('5e','','hide')" value="Yes" />
Yes</label>
<br />
<label>
<input name="5d" type="radio" id="5d_1" onclick="MM_showHideLayers('5e','','show')" value="No" />
No</label>
</p>

<p>6a. If not, why not?</p>

<p>
<textarea name="5e" id="5e" cols="60" rows="5"></textarea>
<br />
</p>

<p>---</p>

<p>7. Please use this space for any other comments you want to make about our ******. </p>

<p>
<textarea name="6" id="6" cols="60" rows="5"></textarea>
</p>

<p>---</p>

<p>9. Are you:</p>

<p>
<label>
<input type="radio" name="8" value="Tenant" id="8_0" />
tenant</label>
<br />
<label>
<input type="radio" name="8" value="Applicant" id="8_1" />
applicant</label>
<br />
<label>
<input type="radio" name="8" value="Housing professional" id="8_2" />
a housing professional</label>
<br />
<label>
<input type="radio" name="8" value="Other" id="8_3" />
Other - please state </label>
<input type="text" name="9a" id="9a" />
<br />
</p>

<p>---</p>

<p>If you want to be entered into our 100 Prize Draw, please fill in your details below.</p>

<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
</table>


<p>
<input name="submit" type="submit" id="submit" value="Submit" />
</p>
</form>

Head:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<meta name="Description" content="Page title." />
<meta name="Keywords" content="stuff in here" />
<title>Title of the page</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!--default stylesheet for screen viewing-->
<link href="css/style_consult.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<script language="JavaScript"
type="text/javascript">
function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
{if(radio[i].type=='radio'&&radio[i].checked==true) {
alert('Please choose yes or no for every question');bool=true}}
return bool;}
</script>
<!-- InstanceEndEditable -->
<!--javascript for the menu bar-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--stylesheet for the menu bar-->
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!--javascript for menu bar rollovers-->
<script type="text/javascript" src="javascript/rollover_lrg.js"></script>
<!--stylesheet for printed pages-->
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<!-- stylesheet for small screen - PDA and phones-->
<link href="css/handheld.css" rel="stylesheet" type="text/css" media="handheld" />
<!--alternate stylesheet for larger text-->
<link href="css/style_bigtext.css" rel="alternate stylesheet" type="text/css" title="alternate" media="screen" />
<!--javascript for the text resize function-->
<script type="text/javascript" src="javascript/styleswitcher.js"></script>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

jscheuer1
06-26-2008, 01:40 PM
This worked out in limited testing:


<script type="text/javascript">
function checkForm(f){
for (var els = f.elements, radio_groups = {}, i = els.length - 1; i > -1; --i)
if(els[i].type && els[i].type == 'radio' && !radio_groups[els[i].name])
radio_groups[els[i].name] = els[i].checked;
for (var p in radio_groups)
if (!radio_groups[p]){
alert('Please check one answer for each question!');
return false;
}
return true;
}
</script>

It only checks the form. For it to work, all radio buttons must have names (as the currently do). However, it is preferred for these to start with letters, not numbers. This has nothing to do with the script, it works fine with numbers or letters. The HTML specification calls for names, classes, and ids to begin with letters.

marynorn
06-26-2008, 02:03 PM
That is great, thank you so much! I've just tested it, and it works beautifully.

mkronix
04-29-2010, 06:21 AM
Hi guys,

I have a form with input text, dropdown menu and groups of radio button. The validation for input text and dropdown menu works fine with these js validator -


<script language="JavaScript">
function formValidator(){

// Make quick references to our fields

var pensyarah = document.getElementById('pensyarah');
var kksem = document.getElementById('kksem');



// Check each input in the order that it appears in the form!
if(madeSelection(pensyarah, "Sila pilih Pensyarah")){
if(madeSelection(kksem, "Sila pilih Kod kursus")){



return true;
}
}


return false;

}



function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return true;
}
return false;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9\s\:]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z\s\.]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z\s]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function madeSelection(elem, helperMsg){
if(elem.value == "*Tiada Pilihan"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}


function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}


</script>

how to add the group of radio button validation inside the existing js validator.. is it posible to merge it in one function? I try to add this code but its not working..



var flag1 = 1;
if (document.thisform.qs1.type == "textarea")
{
if (document.thisform.qs1.value)
{
flag1 = 0;
}
}
else
{
for (var i = 0; i < document.thisform.qs1.length; ++i)
{
if (document.thisform.qs1[i].checked)
{
flag1 = 0;
}
}
}
if (flag1)
{
alert('Please answer Question # 1.');
if (document.thisform.qs1.type == "textarea")
{
document.thisform.qs1.select();
}
return false;
}
var flag2 = 1;
if (document.thisform.qs2.type == "textarea")
{
if (document.thisform.qs2.value)
{
flag2 = 0;
}
}
else
{
for (var i = 0; i < document.thisform.qs2.length; ++i)
{
if (document.thisform.qs2[i].checked)
{
flag2 = 0;
}
}
}
if (flag2)
{
alert('Please answer Question # 2.');
if (document.thisform.qs2.type == "textarea")
{
document.thisform.qs2.select();
}
return false;
}
var flag3 = 1;
if (document.thisform.qs3.type == "textarea")
{
if (document.thisform.qs3.value)
{
flag3 = 0;
}
}
else
{
for (var i = 0; i < document.thisform.qs3.length; ++i)
{
if (document.thisform.qs3[i].checked)
{
flag3 = 0;
}
}
}
if (flag3)
{
alert('Please answer Question # 3.');
if (document.thisform.qs3.type == "textarea")
{
document.thisform.qs3.select();
}
return false;
}
} .........

here is the full code I am using (the code is too long to put in here)
http://www.modernessence.net/e1flashz/images_tmp/form_code.txt


this is how the form looks like ..
http://modernessence.net/e1flashz/images_tmp/form_validation.jpg

Any ideas how to modified it ..?

Thank you in advance.

(sorry for my english, i'm from malaysia)