PDA

View Full Version : Form Validation


Adam_C
07-25-2009, 11:43 AM
I have the following form:


<form method="post" action="post.php" name="update" style="height:280px; width:auto;">
<br />
<div id="box">
<textarea name="story" onclick="if(this.value == 'Input Story Here . . .'){this.value = ''};" style="width:545px; height:104px; font:'Segoe UI'">Input Story Here . . .</textarea>
</div>
<div id="line">
<input type="text" name="first" value="First Name" style="color:#666666;" onclick="if(this.value == 'First Name'){this.value = ''};" align="middle" />
<input type="text" name="last" value="Last Name" style="color:#666666;" onclick="if(this.value == 'Last Name'){this.value = ''};" align="middle" />
<input type="text" name="email" value="Email" style="color:#666666;" onclick="if(this.value == 'Email'){this.value = ''};" align="middle" />
<select name="category" title="category" style="color:#666666;" align="middle" >
<option value="choose" selected>Please Select...</option>
<option value="home">Home</option>
<option value="work">Work</option>
<option value="family">Family</option>
<option value="friends">Friends</option>
<option value="strangers">Strangers</option>
<option value="transport">Transport</option>
</select>
<img src="images/spacer.png" height="1" width="5" />
<input type="image" src="images/go.png" name="submit" align="middle" />
</div>
</form>


I need to make a simple javascript function (that goes between the 'head' tags) that validates the above form so that if the value of each input field equals nothing or its own text then an error pops up and they have to refill in the form, also if the pull down box's value equals 'Please Select . . .' then this will also happen again.

I have no idea what to do, could someone provide a working script, i am confuzzled :confused:

thanks Adam_C :)

sedah
08-04-2009, 03:06 AM
I have the following form:


<form method="post" action="post.php" name="update" style="height:280px; width:auto;">
<br />
<div id="box">
<textarea name="story" onclick="if(this.value == 'Input Story Here . . .'){this.value = ''};" style="width:545px; height:104px; font:'Segoe UI'">Input Story Here . . .</textarea>
</div>
<div id="line">
<input type="text" name="first" value="First Name" style="color:#666666;" onclick="if(this.value == 'First Name'){this.value = ''};" align="middle" />
<input type="text" name="last" value="Last Name" style="color:#666666;" onclick="if(this.value == 'Last Name'){this.value = ''};" align="middle" />
<input type="text" name="email" value="Email" style="color:#666666;" onclick="if(this.value == 'Email'){this.value = ''};" align="middle" />
<select name="category" title="category" style="color:#666666;" align="middle" >
<option value="choose" selected>Please Select...</option>
<option value="home">Home</option>
<option value="work">Work</option>
<option value="family">Family</option>
<option value="friends">Friends</option>
<option value="strangers">Strangers</option>
<option value="transport">Transport</option>
</select>
<img src="images/spacer.png" height="1" width="5" />
<input type="image" src="images/go.png" name="submit" align="middle" />
</div>
</form>
I need to make a simple javascript function (that goes between the 'head' tags) that validates the above form so that if the value of each input field equals nothing or its own text then an error pops up and they have to refill in the form, also if the pull down box's value equals 'Please Select . . .' then this will also happen again.

I have no idea what to do, could someone provide a working script, i am confuzzled :confused:

thanks Adam_C :)

you can simple go into Behaviors Tab, then click on "add behavior", there should be an option for "Validate Form"...and should be easy from there on.

make sure your crosshair is on the field of which form you are validating.

this is how mine turned out. http://deathnoteonlinetv.com/pages/contactus.html