4 Replies - 7297 Views - Last Post: 26 June 2009 - 03:59 AM

#1 korefuji  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-March 09

How to Validate a HTML Form with Javascript?

Posted 08 June 2009 - 11:16 AM

We've been asked to validate our html forms. Below is the code I have so far, but I can't seem to get it to work. I don't think we're allowed to use src=filename.js", and that the javascript needs to be in the document. I'm not actually sure if that's correct, the teacher didnt' explain it very well.

What can i do to validate the page with javascript, and where is the code that I 've used wrong. I've looked at other validater pages, and put together what I think it roughly should be. I've only done two fields in the script, but want to apply to the whole of the form. I think if I can get some guidance I could do the rest based on the first few fields.

But I know it's not working, and would like some help on it. By validation I mean that if I miss a field that is required an alert pops up and tells me I need to enter the details before letting me submit the form, for fields as well as checkboxes, radio buttons, dropdown lists etc

thanks in advance


<Html>
<Head>
<Title> The Form </Title>


<script language=javascript type=text/javascript>

function Validate(theform) {
var empty = "";

if (theform.fname.value == "")
empty += "Fill in Your first name!\n";


if (theform.email.value == "")
empty += "Enter your email address!\n";



if ( empty != ""){
alert("You have missed vital information!\n"
+empty
+"Please complete the form and re-submit");

}
}
</script>

</head>
<body bgcolor=#000000 Text=#FFFFFF  Link=White Alink=Red Vlink=Yellow> 
<h2><center><u>Join The Lich King Or Parish For All Eternity!</u></center></h2>
<P>Please Fill the form below <br>

<Form method="post" action="mailto:blogasfurry@hotmail.com">
<Surname     <Input type=text size=21
name=sname>

<br>
First Name 
<Input type=text size=30 name=fname>
<br>
Email          
<Input type=text size=30 name=email>
<p>Enter Your Motto (Maximum of 10 words):
<INPUT NAME=slogan size=40 maxlenght=35
Value="Please Be Reasonable..">

<input type="hidden" name="Language" value="English">
<INPUT TYPE=HIDDEN NAME="MailingID" value="345768">

<p>Address<br>
<TextArea Rows=3 cols=35 wrap="physical" name=Address></TextArea>
<p>

<tr>
	<td class="formElements"><div align="left">Have you ever played video games?</div></td>
	<td class="formElements">No
	  <input name="Ever play" type="radio" value="No" >
	  Yes
	  <input name="Ever play" type="radio" value="Yes"></td>
  </tr>

<p>
Which games do you enjoy playing the most?
<p>
<Input type=checkbox name=mags value="Byte">MMORPG<br>
<Input type=checkbox name=mags value="Byte">Action/Adventure<br>
<Input type=checkbox name=mags value="Byte">Shooting<br>
<Input type=checkbox name=mags value="Byte">Strategy<br>
<Input type=checkbox name=mags value="Byte">Flash<br>
<Input type=checkbox name=mags value="Byte">Browser<br>
<p>
Which of the following do you own?
<p>
<Input type=checkbox name=mags value="Byte">PC<br>
<Input type=checkbox name=mags value="Byte">Playstation, II or III<br>
<Input type=checkbox name=mags value="Byte">X-Box 360<br>
<Input type=checkbox name=mags value="Byte">Wii<br>
<Input type=checkbox name=mags value="Byte">Saga<br>
<Input type=checkbox name=mags value="Byte">Other<br>

<p>
What age group do you belong to?
<br>
<Input type=radio name=age value="Under_16">Under 16<br>
<Input type=radio name=age value="16_to_19">16 to 19<br>
<Input type=radio name=age value="20_to_24">20 to 24<br>
<Input type=radio name=age value="+_25">+25<br>
<p>


Please select your hobbies from the list that we provided<br>
<select Name=select_hobbies size=5 MULTIPLE>
<Option>Tv
<Option>Films
<Option>Music
<Option>Computer Games
<Option>Fishing
<Option>Hanging out with Friends and Family
<Option>Studying
<Option>Eating
<Option>Sleeping
<Option>Other
</select><p>

<B>How Much Money would You Spend On a Game?:</B> <BR>
<SELECT NAME="Number">
<OPTION SELECTED> £20
<OPTION> £30
<OPTION> £45
<OPTION> £50
<OPTION> More

</SELECT>
<p>

<p>
<a href="#top">Back to Top</a>
<p>

<Input type=submit value="submit">

<Input type=Reset value="Clear">

</form>

</Body>
</Html>




Is This A Good Question/Topic? 0
  • +

Replies To: How to Validate a HTML Form with Javascript?

#2 arthurakay  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: How to Validate a HTML Form with Javascript?

Posted 08 June 2009 - 01:43 PM

You should be aware that most people on these boards don't like answering homework questions. Don't be surprised if you don't get many responses, so you're better off just going to your teacher's office for help.

In any event, I don't see anywhere in the code you posted where you call your Javascript function. You never tell Validate() to run.

Here's a good resource that might help you: http://www.w3schools..._validation.asp
Was This Post Helpful? 0
  • +
  • -

#3 korefuji  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-March 09

Re: How to Validate a HTML Form with Javascript?

Posted 08 June 2009 - 01:46 PM

thanks for the link, I'll give it a go
Was This Post Helpful? 0
  • +
  • -

#4 Prabhakar007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 25-January 08

Re: How to Validate a HTML Form with Javascript?

Posted 09 June 2009 - 03:25 AM

gud wrok :^:
Was This Post Helpful? 0
  • +
  • -

#5 korefuji  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-March 09

Re: How to Validate a HTML Form with Javascript?

Posted 26 June 2009 - 03:59 AM

hi I've done some work on the javascript now, and I would like some help on one part of it.

Basically when the user clicks submit, I want the javascript to display the list of elements that are missing, however, I would like it not to display the submission option.

So>Click submit>display of elements missing in form>no further pop up

At the moment the option tot submit the form still appears.

<Html>
<Head>
<Title> Playstation Shop</Title>

<script type="text/javascript" language="javascript">

function validate(theform){
var empty="";

if (theform.fname.value=="")
empty+="Your First Name\n";

if (theform.sname.value=="")
empty+="Your Surname\n";

if (theform.email.value=="")
empty+="Your Email\n";

if (theform.telephone.value=="")
empty+="Your Telephone Number\n";

if (theform.Address.value=="")
empty+="Your Address\n";

if (theform.creditcardnumber.value=="")
empty+="Your Card Number\n";

if (theform.cardstart.value=="")
empty+="Your Card Start Date\n";

if (theform.cardend.value=="")
empty+="Your Card End Date\n";

var anydelSelected=false;
for(i=0;i<theform.del.length;i++){
	   if(theform.del[i].checked)
				anydelSelected=true;

}

if(!anydelSelected)
	   empty+="Choose your delivery method\n";


var anyregSelected=false;
for(i=0;i<theform.reg.length;i++){
	   if(theform.reg[i].checked)
				anyregSelected=true;
}


if(!anyregSelected)
	   empty+="Registration\n";

if(theform.fave.options[theform.fave.selectedIndex].value == "")	
empty+="Your Favourite Game Type\n";

var anyconsoleSelected=false;
for(i=0;i<theform.console.length;i++){
	   if(theform.console[i].checked)
				anyconsoleSelected=true;
}

if(!anyconsoleSelected)
	   empty+="Choose a console\n";

var anyaccessoriesSelected=false;
for(i=0;i<theform.accessories.length;i++){
	   if(theform.accessories[i].checked)
				anyaccessoriesSelected=true;
}

if(!anyaccessoriesSelected)
	   empty+="Choose your accessories\n";

if(theform.region.options[theform.region.selectedIndex].value == "") 
empty+="What region are you from?\n"; 

if(theform.cardtype.options[theform.cardtype.selectedIndex].value == "") 
empty+="Type of credit or debit card\n"; 



if (empty !=""){

alert ("You Haved Missed the Following Required Details :\n"
+ empty
+ "Please complete and resubmit");
}

else
return true;
}
</script>



<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src="playstationlogo.bmp"
}
function mouseOut()
{
document.getElementById("b1").src="playstationlogo.bmp"
}
</script>




</head>

<body bgcolor=#000000 Text=#FFFFFF  Link=White vlink=#778598 onload="window.alert('Welcome to the Playstation Shop')"; onunload="window=alert('Thank you for your custom')"> 



<h2><center><u>Welcome to the Playstation Shop</u></h2>


<a href="http://uk.playstation.com" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit Playstation UK" src="playstationlogo.bmp" id="b1" /></a></center>






</p><form onreset="return confirm ('Do you want to start again?')"
onsubmit="return confirm ('Do you wish to submit the form?')">


<form>


<h2>Your Details</h2>
<br>
First Name  <Input type="text" name="fname" size="30" onselect="alert('You have selected some of the text.')" /> 
Surname  <Input type="text" name="sname" size="30" onselect="alert('You have selected some of the text.')" /> 

<br>

Email		   <Input type=text name="email" size=30 onselect="alert('You have selected some of the text.')" />

Telephone: <input type= "text" name="telephone"  size=30 maxlength=30
Value=""  onselect="alert('You have selected some of the text.')" />

<br>
<input type="button" onclick="prompter()" value="Whats Your nickname?">

<p>Address<br>
<TextArea Rows=3 cols=35  name="Address" wrap="physical" onselect="alert('You have selected some of the text.')" /></TextArea>


<hr>

<p>
<h2>Card Details</h2>

Card Number <input type= "text" name="creditcardnumber"  size=30 maxlength=30
Value=""  onselect="alert('You have selected some of the text.')" />

Card Start Date <input type= "text" name="cardstart"  size=5 maxlength=30
Value=""  onselect="alert('You have selected some of the text.')" />

Card End Date <input type= "text" name="cardend"  size=5 maxlength=5
Value=""  onselect="alert('You have selected some of the text.')" />

<br>

Please choose your card type 
<select name=cardtype>
<option selected value="">Choose one
<OPTION value="3"> Switch/Maestro
<OPTION value="3"> Visa
<OPTION value="3"> Mastercard
<OPTION value="3"> American Express

</SELECT>


<hr>
<h2>Delivery Options</h2>
<input type="radio" name="del" value="NextDay">£30.00 Next Day 
<input type="radio" name="del" value="FirstClass">£15.00 Royal Mail First Class
<input type="radio" name="del" value="SecondClass">£8.00 Second Class Royal Mail
<hr>

<h2>Consoles</h2>
Ordering more than one of the same console? Please call us.
<p>
<Input type=checkbox name=console value="ps1">Playstation One (£21.00)<br>
<Input type=checkbox name=console value="ps2">Playstation Two (£93.00)<br>
<Input type=checkbox name=console value="ps3">Playstation Three (£329.99)<br>
<Input type=checkbox name=console value="psp">Playstation Portable (£137.99)<br>
<Input type=checkbox name=console value="None">None<br>
<hr>

<p>
<h2>Accessories</h2>
Ordering more than one accessory for the same console? Please call us.
<p>
<Input type=checkbox name=accessories value="1">Playstation One Controller (£5.00)<br>
<Input type=checkbox name=accessories value="1">Playstation One Memory Card (£2.00)<br>
<Input type=checkbox name=accessories value="1">Playstation Two Controller (£18.00)<br>
<Input type=checkbox name=accessories value="1">Playstation Two Memory Card (£10.00)<br>
<Input type=checkbox name=accessories value="1">Playstation Three Controller (£35.00)<br>
<Input type=checkbox name=accessories value="1">None<br>
<p>
<hr>
<p>
<h2>Registration</h2>
How would you like to receive Playstation related offers?
<br>
<Input type=radio name=reg value="email">Email
<Input type=radio name=reg value="post">Post
<Input type=radio name=reg value="None">None
<p>

<hr>

<h2>Favourite Type of Game</h2><br>
<select name=fave size=4>
<Option selected value="">Choose from an option below</option>
<Option value="1">Action</option>
<Option value="1">Adventure</option>
<Option value="1">RPG</option>
<Option value="1">Sports</option>
<Option value="1">Puzzle</option>
<Option value="1">Strategy</option>
<Option value="1">Simulation</option>
<Option value="1">None</option>
</select>

<p>
<hr>
<p>
<h2>Your Region</h2>
What region are you located in?<BR>
<select name=region>
<option selected value="">Choose one
<OPTION value="3"> North America
<OPTION value="3"> South America
<OPTION value="3"> Africa
<OPTION value="3"> Europe
<OPTION value="3"> Asia

</SELECT>
<p>

<hr>
<a href="#top">Back to Top</a>
<p>


<script type="text/javascript"  language="Javascript">
<!--
function prompter() {
var reply = prompt("Hello and what is your nickname?", "")





alert ( "Thank you for visiting the Playstation Shop " + reply + " !")




}
//-->
</script>


<script type="text/javascript" language="javascript">


document.write ("<h3>Please take your time filling in the form</h3>")

</script>

<p><input type="submit" value-"submit" name="sub" onclick="return validate (this.form)">
<input type="reset" value="clear"></p>

<center><img src="playstationlogo.bmp" alt="Playstation UK" align="center"
onmouseover="alert('Visit Playstation UK!')" /> </center>
<hr>

</form>
</Body>
</Html>



Would welcome some help on this. Thanks in advance
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1