Jump to content

Help with form validation

cs1h

By cs1h
in Javascript Help

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:[email protected]">
						[email protected]</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
https://forums.phpfreaks.com/topic/70072-help-with-form-validation/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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.