Jump to content

Help with form validation

cs1h

By cs1h
in Javascript Help

 Share

Recommended Posts

cs1h Advanced Member

cs1h

Posted
Posted

Hi,

 

I am trying to make it so that my form cannot be submitted without filling in the options, I have written a code for my form but i cannot get it to work. I am still very new to Javascript and do not know where I have gone wrong.

 

My script so far is,

 

 

 
<script language="JavaScript" src="formValidator.js">
</script>
<script language="JavaScript">
// check form values
function checkForm()
{
// instantiate object
fv = new formValidator();
// perform checks
// check for empty name field
// check for empty email address
if (fv.isEmpty(document.forms[0].elements[0].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for valid email address format
if (!fv.isEmpty(document.forms[0].elements[0].value) &&
!fv.isEmailAddress(document.forms[0].elements[0].value))
{
fv.raiseError("Please enter a valid email address");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[1].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[2].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[3].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[4].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[5].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[6].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for empty name field
if (fv.isEmpty(document.forms[0].elements[7].value))
{
fv.raiseError("You must fill out all of the fields, except Photo (#, which is optional");
}
// check for checkbox
if (!fv.isChecked(document.forms[0].elements[9]))
{
fv.raiseError("You must agree to the Terms of Use and Privacy Policy");
}
// all done
// if errors, display, else proceed
if (fv.numErrors() > 0)
{
fv.displayErrors();
return false;
}
else
{
return true;
}
}
</script>

 

My form is,

 

 
<FORM name=myform action=adding.php method=post enctype="multipart/form-data" onSubmit="return checkForm()">
            <table border="0" width="97%" cellspacing="0" cellpadding="0" id="table9">
			<tr>
				<td width="100%" height="1037">
				<table border="0" width="770" cellspacing="0" cellpadding="0" id="table10">
	        <tr>
						<td width="14" height="28" background="corner_blue_left.png"> </td>
						<td height="28" colspan="3" bgcolor="#00518D"><span class="style65">Ten Step Submission Form for Magazine Articles, News Stories, and Reviews</span></td>
						<td width="14" height="28" background="corner_blue_right.png"> </td>
					</tr>

					<tr>
					  <td width="14" background="line_left.png" rowspan="36" bgcolor="#FFFFFF"> </td>
						<td colspan="3" bgcolor="#FFFFFF"> </td>
				      <td width="14" background="line_right.png" rowspan="36" bgcolor="#FFFFFF"> </td>
					</tr>
					<tr>
						<td height="13" colspan="3" bgcolor="#FFFFFF" class="style16">
						Adding an article is easy. Simply fill out the 10 step form below (all fields, except photo (#, are required for submission).</td>
					</tr>
					<tr>
					  <td colspan="3" bgcolor="#FFFFFF"> </td>
				    </tr>

					<tr>
					  <td width="100" bgcolor="#FFFFFF"><span class="style20"><strong><font color="#EE7F01">1. </font></strong></span><span class="style20">Your email:</span></td>
				      <td width="14" bgcolor="#FFFFFF"> </td>
				      <td width="628" bgcolor="#FFFFFF"><label>
				        <input name="Email" type="text" id="Email" size="28" maxlength="250">
				      </label></td>
					</tr>
					<tr>
						<td colspan="3" bgcolor="#FFFFFF"> </td>
					</tr>
					<tr>
						<td width="100" height="13" align="left" valign="middle" bgcolor="#FFFFFF"><span class="style50"><font color="#EE7F01">2. </font></span><span class="style20">Your name:</span></td>
					    <td width="14" valign="middle" bgcolor="#FFFFFF"> </td>
					    <td width="628" align="left" valign="middle" bgcolor="#FFFFFF" style="width: 421px"><label>
					      <input name="name" type="text" id="name" size="28" maxlength="250" />
					    </label></td>
					</tr>
					<tr>
					  <td width="100" bgcolor="#FFFFFF"> </td>
					  <td width="14" bgcolor="#FFFFFF"> </td>
					  <td width="628" align="left" valign="top" bgcolor="#FFFFFF" style="width: 421px"> </td>
				    </tr>
					<tr>
					  <td width="100" bgcolor="#FFFFFF"><span class="style50"><font color="#EE7F01">3.</font></span> <span class="style20">Article title:</span></td>
					  <td width="14" bgcolor="#FFFFFF"> </td>
					  <td width="628" align="left" valign="top" bgcolor="#FFFFFF" style="width: 421px"><input name="title" type="text" class="userpass" id="title" style="width: 421" value="" size="28" maxlength="250" /></td>
				    </tr>
					<tr>
						<td width="100" bgcolor="#FFFFFF"> </td>
						<td width="14" bgcolor="#FFFFFF"> </td>
					    <td width="628" align="left" valign="top" bgcolor="#FFFFFF" style="width: 421px"> 							</td>
					</tr>
					<tr>
						<td width="100" height="20" bgcolor="#FFFFFF">
					  <span class="style20"><font color="#000000">(<strong>20</strong>						  character limit)</font></span></td>
						<td width="14" height="20" bgcolor="#FFFFFF"> </td>
					    <td width="628" height="20" align="left" valign="top" bgcolor="#FFFFFF" style="width: 421px">
						  <span class="style16"><font color="#00518D"><em>i.e.</em>							a simple description of article's content</font></span></td>
					</tr>

					<tr>
						<td colspan="3" bgcolor="#FFFFFF"> </td>
					</tr>
					<tr>
						<td width="100" align="left" valign="top" bgcolor="#FFFFFF"><span class="style50"><font color="#EE7F01">4.</font></span>
						  <span class="style20">Abstract:</span>
						  <p class="style16">							    <font color="#00518D"><em>i.e.</em> a short overview and 
							introduction to the full article</font></p>
					  <p class="style20"><font color="#000000">(<strong>300</strong>							character limit)</font></p>						  </td>
					  <td align="left" valign="top" width="14" bgcolor="#FFFFFF"> </td>
					  <td width="628" valign="top" bgcolor="#FFFFFF" style="width: 421"><font size="1" face="arial, helvetica, sans-serif">
					    <textarea name=message wrap=physical cols=70 rows=7 onKeyDown="textCounter(this.form.message,this.form.remLen,300);" onKeyUp="textCounter(this.form.message,this.form.remLen,300);"></textarea>
					    <br>
<input readonly type=text name=remLen size=3 maxlength=3 value="300"> 
</font><span class="style17 style22">characters left</span></td>
					</tr>

					<tr>
						<td colspan="3" bgcolor="#FFFFFF"> </td>
					</tr>
					<tr>
						<td width="100" height="137" align="left" valign="top" bgcolor="#FFFFFF"><span class="style20"><strong><font color="#EE7F01">5.</font></strong> Article:</span>
						  <p class="style16">
					        <font color="#00518D"><em>i.e.</em> the full article</font></p>
						<p class="style20"><font color="#000000">(<strong>4000</strong>							character limit)</font></p>						  </td>
					  <td align="left" valign="top" width="14" bgcolor="#FFFFFF"> </td>
					  <td width="628" valign="top" bgcolor="#FFFFFF"><font size="1" face="arial, helvetica, sans-serif">
					    <textarea name=messagetwo wrap=physical cols=70 rows=7 onKeyDown="textCounter(this.form.messagetwo,this.form.remLen2,4000);" onKeyUp="textCounter(this.form.messagetwo,this.form.remLen2,4000);"></textarea>
					    <br>
<input readonly type=text name=remLen2 size=4 maxlength=4 value="4000"> 
					  </font><span class="style17 style22">characters left</span></td>
				  </tr>

					<tr>
						<td height="0" bgcolor="#FFFFFF"> </td>
					    <td height="0" bgcolor="#FFFFFF"> </td>
					    <td height="0" bgcolor="#FFFFFF"> </td>
					</tr>
					<tr>
						<td width="100" bgcolor="#FFFFFF" class="style20"><strong><font color="#EE7F01">6. </font></strong>Location</td>
						<td width="14" bgcolor="#FFFFFF"> </td>
					  <td width="628" align="left" valign="middle" bgcolor="#FFFFFF"><!-- this menu holds the files to go--><span class="style35"><span class="style17"><font color="#00518D"><em>i.e.</em> where did the events you have written about 
					  take place?</font></span>*</span></td>
					</tr>
					<tr>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> </td>
				    </tr>
					<tr>
					  <td bgcolor="#FFFFFF" class="style16">Country:</td>
					  <td bgcolor="#FFFFFF"> </td>
					  <td width="628" align="left" valign="top" bgcolor="#FFFFFF"><select name="menuSubjectsDMA" onChange="changeFilesDMA()">
                            <option value="none">Select a Continent </option>
                            <option value="">Africa </option>
                            <option value="">Asia </option>
                            <option value="">Europe </option>
                            <option value="">North America </option>
                            <option value="">Oceania </option>
                            <option value="">South America </option>
                          </select>
					    <select name="menuFilesDMA" style="width:300">
                              <option value="none"> Choose Country </option>
                            </select></td>
				    </tr>
					<tr>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> </td>
				    </tr>
					<tr>
					  <td bgcolor="#FFFFFF" class="style20 style66">Town or Region:</td>
					  <td bgcolor="#FFFFFF"> </td>
					  <td width="628" align="left" valign="top" bgcolor="#FFFFFF">
					    <input name="title2" type="text" class="userpass" id="title2" style="width: 421" value="" size="28" maxlength="250" /></td>
				    </tr>

					<tr>
						<td width="100" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="14" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> 							</td>
					</tr>



					<tr>
						<td width="100" height="24" bgcolor="#FFFFFF" class="style20"><strong><font color="#EE7F01">7. </font></strong>

						Catagory:</td>
					  <td width="14" bgcolor="#FFFFFF"> </td>
				      <td width="628" align="left" valign="middle" bgcolor="#FFFFFF"><select name="Catagory" id="Catagory">
                            <option selected="selected">Magazine</option>
                            <option>News</option>
                            <option>Review</option>
                          </select></td>
				  </tr>
					<tr>
						<td width="100" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="14" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> 							</td>
					</tr>
					<tr>
					  <td height="13" bgcolor="#FFFFFF"> </td>
					  <td height="13" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="13" align="left" valign="middle" bgcolor="#FFFFFF"><span class="Small_Blue"><a href="#" onClick="MM_openBrWindow('reports.html','Reports','menubar=yes,scrollbars=yes,resizable=yes,width=500,height=500')">(click here if you're unsure which category your article belongs in)</a></span></td>
				    </tr>
					<tr>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF" class="style20"> </td>
				    </tr>
					<tr>
						<td width="100" height="20" bgcolor="#FFFFFF"><span class="style20"><span class="style46">8. </span> Photo:</span></td>
					  <td width="14" height="20" bgcolor="#F7EECD"> </td>
					  <td width="628" height="20" align="left" valign="top" bgcolor="#F7EECD" class="style20"> </td>
				  </tr>
					<tr>
					  <td width="100" bgcolor="#FFFFFF"> </td>
					  <td height="19" bgcolor="#F7EECD"> </td>
					  <td width="628" height="19" align="left" valign="top" bgcolor="#F7EECD"><input name="photo" type="file" id="photo" />
					    <span class="style16 style34">(photo is optional)</span></td>
				    </tr>
					<tr>
					  <td width="100" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="14" height="0" bgcolor="#F7EECD"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#F7EECD"> </td>
				  </tr>
					<tr>
					  <td width="100" bgcolor="#FFFFFF"> </td>
					  <td height="19" bgcolor="#F7EECD"> </td>
					  <td width="628" height="19" align="left" valign="top" bgcolor="#F7EECD" class="style16"><table width="628" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="614">We only accept jpg images with a maximum image dimension of 350 Pixels. To resize or convert photos online, myroho recommend visiting <a href="#" onClick="MM_openBrWindow('http://www.shrinkpictures.com/','shrinkpictures','menubar=yes,scrollbars=yes,resizable=yes,width=800,height=800')">www.shrinkpictures.com</a>. It's fast, free and easy. We hope to introduce our own photo formatting service soon. Thank you for your patience.</td>
                              <td width="14"> </td>
                            </tr>
                          </table></td>
				    </tr>
					<tr>
					  <td width="100" height="0" bgcolor="#FFFFFF"> </td>
					  <td height="0" bgcolor="#F7EECD"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#F7EECD"> </td>
				    </tr>
					<tr>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> </td>
				    </tr>

					<tr>
						<td width="100" height="20" valign="middle" bgcolor="#FFFFFF" class="style20"><strong><font color="#EE7F01">9. </font></strong>Sign:</td>
					  <td width="14" height="20" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="20" align="left" valign="middle" bgcolor="#FFFFFF" class="style20"><label>
					    <input type="checkbox" name="checkbox" id="checkbox" />
					  </label>
				      I have read and agree to the <a href="#" onClick="MM_openBrWindow('terms_and_conditions.html','Terms','menubar=yes,scrollbars=yes,width=500,height=500')">Terms of Use</a> and <a href="#" onClick="MM_openBrWindow('privacy_and_cookie_policy.html','Privacy','menubar=yes,scrollbars=yes,width=500,height=500')">Privacy  Policy</a>.</td>
				  </tr>
					<tr>
						<td width="100" height="0" bgcolor="#FFFFFF"> </td>
						<td width="14" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> 							</td>
					</tr>
					<tr>
						<td width="100" height="20" bgcolor="#FFFFFF"><span class="style20"><strong><font color="#EE7F01">10. </font></strong>Submit:</span></td>
					  <td width="14" height="20" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="20" align="left" valign="top" bgcolor="#FFFFFF"><label><input type="image" value="submitname" src="post_article.png" width="110" height="28" border="0" name="image"></label></td>
					</tr>
					<tr>
						<td width="100" height="0" bgcolor="#FFFFFF"> </td>
						<td width="14" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="top" bgcolor="#FFFFFF"> 							</td>
					</tr>
					<tr>
						<td width="100" height="0" bgcolor="#FFFFFF"> </td>
						<td width="14" height="0" bgcolor="#FFFFFF"> </td>
					  <td width="628" height="0" align="left" valign="middle" bgcolor="#FFFFFF">
						<span class="style16">
						Having problems with a submission? Email
						    <a href="mailto:info@myroho.com">
						info@myroho.com</a></span></td>
					</tr>
					<tr>
						<td width="14" height="28" background="line_left_corner.png" bgcolor="#FFFFFF"> </td>
						<td height="28" background="line_base.png" colspan="3" bgcolor="#FFFFFF"> </td>
						<td width="14" height="28" background="line_right_corner.png" bgcolor="#FFFFFF"> </td>
					</tr>
					<tr>
					  <td height="0" colspan="5" bgcolor="#FFFFFF"> </td>
				    </tr>
				</table>				  </td>
			  </tr>
		</table></form>

 

All help is appreciated,

 

Cheers

Colin

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.