Javascript Form Validation

Question

munchlaxxx 0 Junior Poster in Training

9 Years Ago

This is my code:

<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 HoTMetaL + extensions//EN">
<HTML>
<HEAD>
<TITLE>Courses Radio Button Project</TITLE>

<SCRIPT Language="JavaScript">
<!--

function choiceChecker(){
var message = "A course can only be one choice!";
var returnval= true;

for (var i = 0; i < form.Choice1.length; i++){

      if ((form.Choice1[i].checked && form.Choice2[i].checked) || (form.Choice1[i].checked && form.Choice3[i].checked) ||(form.Choice2[i].checked && form.Choice3[i].checked)){
      alert(message)
      returnval=false;
      break;
      }

   } 
   return returnval;
  } 

//-->
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#efefef">
<H2>Please choose three courses in order of preference:</H2>
<H3>(You must choose different courses for your first second and third choice.)</H3>

<FORM Name = "Courses" onSubmit="return choiceChecker()">

<TABLE>
<TR>
<TD ALIGN="RIGHT" COLSTART="1"><B>Course</B></TD>
<TD ALIGN="CENTER" COLSTART="2"><B>First Choice</B></TD>
<TD ALIGN="CENTER" COLSTART="3"><B>Second Choice</B></TD>
<TD ALIGN="CENTER" COLSTART="4"><B>Third Choice</B></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">English</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT
TYPE="RADIO" NAME="Choice1" VALUE="eng" CHECKED="CHECKED"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT
TYPE="RADIO" NAME="Choice2" VALUE="eng" ></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT
TYPE="RADIO" NAME="Choice3" VALUE="eng" ></TD>
</TR>
<TR><TD ALIGN="RIGHT" COLSTART="1">French</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="fre"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="fre" CHECKED="CHECKED"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="fre"></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">Spanish</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="spa"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="spa"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="spa" CHECKED="CHECKED"></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">Math</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="mat"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="mat"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="mat"></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">Science</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="sci"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="sci"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="sci"></TD>
</TR>

</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Register" SIZE="20">
<INPUT TYPE="RESET" VALUE="Reset" SIZE="20"></P></FORM>


</BODY></HTML>

Is my for loop not working? Or something about the onSubmit? I'm not exactly sure what the problem is. When I press Register, it just resets and the alert never pops up.

javascript validation

Edited 9 Years Ago by munchlaxxx because: .

2 Contributors
1 Reply
253 Views
16 Minutes Discussion Span
Latest Post 9 Years Ago Latest Post by Adrian_5

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Adrian_5 1 Light Poster · Answer 1 · 2014-05-23T21:20:01+00:00

Javascript is not my strong point, but: I think that your script doesn't find the form because you didn't select it corectly from your DOM tree. Try it like this:

<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 HoTMetaL + extensions//EN">
<HTML>
<HEAD>
<TITLE>Courses Radio Button Project</TITLE>
<SCRIPT Language="JavaScript">
<!--
function choiceChecker(){
var message = "A course can only be one choice!";
var returnval= true;
var theform = document.getElementById('Courses');
for (var i = 0; i < theform.Choice1.length; i++){
      if ((theform.Choice1[i].checked && theform.Choice2[i].checked) || (theform.Choice1[i].checked && theform.Choice3[i].checked) ||(theform.Choice2[i].checked && theform.Choice3[i].checked)){
      alert(message);
      returnval=false;
      break;
      }
   } 
   return returnval;
  } 
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#efefef">
<H2>Please choose three courses in order of preference:</H2>
<H3>(You must choose different courses for your first second and third choice.)</H3>
<FORM Name = "Courses" id="Courses" onSubmit="return choiceChecker()">
<TABLE>
<TR>
<TD ALIGN="RIGHT" COLSTART="1"><B>Course</B></TD>
<TD ALIGN="CENTER" COLSTART="2"><B>First Choice</B></TD>
<TD ALIGN="CENTER" COLSTART="3"><B>Second Choice</B></TD>
<TD ALIGN="CENTER" COLSTART="4"><B>Third Choice</B></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">English</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT
TYPE="RADIO" NAME="Choice1" VALUE="eng" CHECKED="CHECKED"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT
TYPE="RADIO" NAME="Choice2" VALUE="eng" ></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT
TYPE="RADIO" NAME="Choice3" VALUE="eng" ></TD>
</TR>
<TR><TD ALIGN="RIGHT" COLSTART="1">French</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="fre"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="fre" CHECKED="CHECKED"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="fre"></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">Spanish</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="spa"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="spa"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="spa" CHECKED="CHECKED"></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">Math</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="mat"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="mat"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="mat"></TD>
</TR>
<TR>
<TD ALIGN="RIGHT" COLSTART="1">Science</TD>
<TD ALIGN="CENTER" COLSTART="2"><INPUT TYPE="RADIO" NAME="Choice1" VALUE="sci"></TD>
<TD ALIGN="CENTER" COLSTART="3"><INPUT TYPE="RADIO" NAME="Choice2" VALUE="sci"></TD>
<TD ALIGN="CENTER" COLSTART="4"><INPUT TYPE="RADIO" NAME="Choice3" VALUE="sci"></TD>
</TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Register" SIZE="20">
<INPUT TYPE="RESET" VALUE="Reset" SIZE="20"></P></FORM>
</BODY></HTML>