PDA

View Full Version : radio button validation help



shaz2012
Jul 26th, 2012, 06:35 PM
Hi there,

I am doing a lesson tutorial and need some help, I am stuck on the Radio button validation, I have got the buttons to be selected indiviually however I would like a message window to appear confirming what radio button the user has picked and allowing the user to accept or rejected..... Need help :confused:

Heres what I have so far



function validateForm() {
var result = true;
var msg="";

if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;

}if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;


}if (document.ExamEntry.idnumber.value=="") {
msg+="You must enter the I.D Number \n";
document.ExamEntry.idnumber.focus();
document.getElementById('idnumber').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}

}
//-->
</SCRIPT>

<META name=GENERATOR content="MSHTML 9.00.8112.16447"></HEAD>
<BODY>
<H1>Exam Entry Form</H1>
<FORM method=post name=ExamEntry action=success.html>
<TABLE border=0 width="50%">
<TBODY>
<TR>
<TD id=name>Name</TD>
<TD><INPUT name=name></TD></TR>
<TR>
<TD id=subject>Subject</TD>
<TD><INPUT name=subject></TD></TR>
<TR>
<TD id=idnumber>I.D Number</TD>
<TD><INPUT name=idnumber>
</TD>
<TR>
//Radio buttons
<TD id=Entry level>Entry Level</TD>
<TD>GCSE: <input type="radio" name="r1" onClick="theone=0"><br>
AS: <input type="radio" name="r1" onClick="theone=1"><br>
A2: <input type="radio" name="r1" onClick="theone=1"><br>



</TD>
</TR>
<TR>
<TD><INPUT onclick="return validateForm();" name=Submit value=Submit type=submit></TD>
<TD><INPUT name=Reset value=Reset type=reset></TD></TR></TBODY></TABLE>
<p>&nbsp;</p>
</FORM></BODY></HTML>

Philip M
Jul 26th, 2012, 08:03 PM
<html>
<head>
</head>
<body>

<form>
A <input type = "radio" name = "rad1" value = "A">
B <input type = "radio" name = "rad1" value = "B">
C <input type = "radio" name = "rad1" value = "C">
D <input type = "radio" name = "rad1" value = "D">
<br><br>
<input type = "button" value = "Which radio selected?" onclick = "findit()">
</form>

<script type = "text/javascript">

function findit() {

var found = false;
var elem = document.forms[0].rad1;
for (var i=0; i<elem.length;i++) {
if (elem[i].checked) {
alert ("You have checked radio button " + elem[i].value);
found = true;
}
}
if (!found) {
alert ("You have not checked any radio button");
}

}

</script>

</body>
</html>

Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

All the misery this world contains comes from seeking pleasure for oneself; all the joy this world contains comes from seeking happiniess for others. - Buddist aphorism

shaz2012
Jul 26th, 2012, 10:34 PM
Hi Philip,

Thank you for that, I have implemented your method in my coding however I have a slight problem.

When I enter the text for the three boxes and click on the submit button, it produces an error message, It should show up the validation message of the radio box..not sure why.


Also once the the three boxes are filled and the radio box is selected how would I get my message box to give me an option of either accepting or rejecting??

:o



function validateForm() {
var result = true;
var msg="";




if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;

}if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;




}if (document.ExamEntry.idnumber.value=="") {
msg+="You must enter the I.D Number \n";
document.ExamEntry.idnumber.focus();
document.getElementById('idnumber').style.color="red";
result = false;

var found = false;
var elem = document.forms[0].rad1;
for (var i=0; i<elem.length;i++) {
if (elem[i].checked) {
alert ("You have checked radio button " + elem[i].value);

found = true;
}
}
if (!found) {
msg+="You must select a level\n";
}







}
if(msg==""){
return result;
}
{
alert(msg)
return result;



}
}







//-->
</SCRIPT>

<META name=GENERATOR content="MSHTML 9.00.8112.16447"></HEAD>
<BODY>
<H1>Exam Entry Form</H1>
<FORM method=post name=ExamEntry action=success.html>
<TABLE border=0 width="50%">
<TBODY>
<TR>
<TD id=name>Name</TD>
<TD><INPUT name=name></TD></TR>
<TR>
<TD id=subject>Subject</TD>
<TD><INPUT name=subject></TD></TR>
<TR>
<TD id=idnumber>I.D Number</TD>
<TD><INPUT name=idnumber>
</TD>
<TR>
<TD id=Entry level>Entry Level</TD>
<TD
<TD
<forms>
A <input type = "radio" name = "rad1" value = "A">
B <input type = "radio" name = "rad1" value = "B">
C <input type = "radio" name = "rad1" value = "C">
D <input type = "radio" name = "rad1" value = "D">

<br><br>
<forms/>

</TD>
</TR>
<TR>
<TD><INPUT onclick="return validateForm();" name=Submit value=Submit type=submit></TD>
<TD><INPUT name=Reset value=Reset type=reset></TD></TR></TBODY></TABLE>
<p>&nbsp;</p>
</FORM></BODY></HTML>

Philip M
Jul 27th, 2012, 09:54 AM
You have a missing/misplaced closing bracket:-

if (document.ExamEntry.idnumber.value=="") {
msg+="You must enter the I.D Number \n";
document.ExamEntry.idnumber.focus();
document.getElementById('idnumber').style.color="red";
result = false;
}

and delete the wrongly positioned }
}
if(msg==""){
return result;


Apart from that and the fact that the script will accept any rubbish typed into the textboxes, it seems to be working fine for me. But the closing form tag is </form> not <forms/>

If the message is "" (no errors) show a <span> with a checkbox:-


<span id = "cbox" style="display:none" onclick = "proceed()"> Click to confirm<input type = "checkbox"></span>and in script:-


if(msg==""){
document.getElementById("cbox").style.display="block";
return result;
}

and a function proceed() to continue if the checkbox is checked.

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags (not highlighting). This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

shaz2012
Jul 27th, 2012, 02:28 PM
Thank you, it does not give me an error message like before, normally it would throw an error once I typed in the last text box,

I am trying to add a pop menu when you finally fill in all the boxes and select the radio box.

So far I got the following, not sure how to add the rest of the text boxes in the below code.

and then either reject or accept it.

My reset button does not work for some reason also.




var found = false;
var elem = document.forms[0].rad1;
for (var i=0; i<elem.length;i++) {
if (elem[i].checked) {
alert ("You have checked radio button " + elem[i].value);
found = true;
}
}




function validateForm() {
var result = true;
var msg="";




if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;

}if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;




}if (document.ExamEntry.idnumber.value=="") {
msg+="You must enter the I.D Number \n";
document.ExamEntry.idnumber.focus();
document.getElementById('idnumber').style.color="red";
result = false;
}
var found = false;
var elem = document.forms[0].rad1;
for (var i=0; i<elem.length;i++) {
if (elem[i].checked) {
alert ("You have checked radio button " + elem[i].value);
found = true;
}
}

if (!found) {
msg+="You must select a level\n";
}


if(msg==""){
return result;
}
{
alert(msg)
return result;



}

proceed()
if(msg==""){
document.getElementById("cbox").style.display="block";
return result;
}


}




//-->
</SCRIPT>

<META name=GENERATOR content="MSHTML 9.00.8112.16447"></HEAD>
<BODY>
<H1>Exam Entry Form</H1>
<FORM method=post name=ExamEntry action=success.html>
<TABLE border=0 width="50%">

<TR>
<TD id=name>Name</TD>
<TD><INPUT name=name></TD></TR>
<TR>
<TD id=subject>Subject</TD>
<TD><INPUT name=subject></TD></TR>
<TR>
<TD id=idnumber>I.D Number</TD>
<TD><INPUT name=idnumber>

<TR>
<TD id=Entry level>Entry Level</TD>
<TD

<>
<form>
A <input type = "radio" name = "rad1" value = "A">
B <input type = "radio" name = "rad1" value = "B">
C <input type = "radio" name = "rad1" value = "C">
D <input type = "radio" name = "rad1" value = "D">
</form>
<br><br>


</TD>
</TR>
<TR>
<TD><INPUT onclick="return validateForm();" name=Submit value=Submit type=submit></TD>
<TD><INPUT name=Reset value=Reset


type=reset></TD></TR></TBODY></TABLE>
<p>&nbsp;</p>
</FORM></BODY></HTML>

Philip M
Jul 27th, 2012, 02:48 PM
Thank you, it does not give me an error message like before, normally it would throw an error once I typed in the last text box,
My reset button does not work for some reason also.


You will need to adjust/re-arrange the code so that the messages are displayed at the appropriate time - as it stands you have added the radios and the code to advise which radio has been selected so that this is called before the message box is shown.

Your reset button does not work because you have closed the form prematurely with an extra </form> tag. That is because you have copied the code I gave you quite blindly.

Suggest you fix the errors in your markup first. See http://validator.w3.org/
Have you tried using your error console?