...

View Full Version : Form Validation



mark87
12-27-2005, 04:49 PM
I'm trying to implement some Javascript validation.

Basically I want all the different sections on the same page - but the following sections are hidden until the current section has been validated. I can't really see why it's not working (the page isn't finished yet).

I guess it's more of a javscript issue, but here's the link -

http://www.markaylward.co.uk/registertest/

Also, can anyone help with making the top tabs in line with the bottom of the header div?

mlseim
12-27-2005, 05:13 PM
It's sort of hard without seeing everything (like process.php).

I don't even know if you have that script in place.

Your line:
<form name="frm" id="frm" action="process.php" method="post">

I think needs to be something like this ...
<form name="frm" onsubmit="return validateOnSubmit()" id="frm" action="process.php" method="post">

If everything is "true" (or OK), it will run the script called "process.php".

Like I say, it's sort of hard since I've used something similar, but does it a bit
different. This is the script I've used in the past:
http://www.xs4all.nl/~sbpoley/webmatters/formval.html

Maybe that will help?

mark87
12-27-2005, 05:29 PM
The thing is I'm trying to validate each part of the form as it goes along.

Ie. User fills out first section, click on 'continue', the first section is validated, if the fields aren't filled out the 'error' text is made visible and the text boxes are changed to a different colour, if the validation is successful, the first section is hidden and the 2nd section is shown.

Hope this makes sense.

process.php doesn't even exist in that directory at the moment - does it matter? As it's not processing the entire form until the final section is completed I didn't think it would matter.

I'll take a look at that page.

mark87
12-27-2005, 11:03 PM
Anyone? I'm sure there's a simple solution...

_Aerospace_Eng_
12-29-2005, 12:37 AM
Well mlseim has given you half the answer, you need onsubmit="return Validate_Personal()" in your open form tag. Now your JS has some errors. When declaring CSS in javascript you need style. before the CSS property.

function Validate_Personal() {
if ( document.getElementById('firstname').value == "" )
{
document.getElementById('firstname').style.backgroundColor="#F00";
document.getElementById('error').style.display="block";
return false;
}
if ( document.getElementById('lastname').value == "" )
{
document.getElementById('lastname').style.backgroundColor="#F00";
document.getElementById('error').style.display="block";
return false;
}
if ( document.getElementById('sex').value == "" )
{
document.getElementById('sex').style.backgroundColor="#F00";
document.getElementById('error').style.display="block";
return false;
}
else {
document.getElementById('firstname').style.backgroundColor="#FFF";
document.getElementById('lastname').style.backgroundColor="#FFF";
document.getElementById('sex').style.backgroundColor="#FFF";
document.getElementById('personal').style.display="none";
document.getElementById('contact').style.display="block";
return true;
}
}
Your function was always returning true, you needed an else {} in there to return true only if the other fields were not true. I think you might actually need to use a submit button rather than a link. The link would be set up like this

<a href="#" onclick="document.getElementById('frm').submit();return false" class="next" title="Next Page">Continue &gt;</a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Apply for Membership with Accendo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<base href="http://www.markaylward.co.uk/registertest/" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function trColorOn(elementId) {
if (document.getElementById) {
document.getElementById(elementId).style.backgroundColor="#FAFAD2"
}
}

function trColorOff(elementId) {
if (document.getElementById) {
document.getElementById(elementId).style.backgroundColor="#FFF"
}
}

function Validate_Personal() {
if ( document.getElementById('firstname').value == "" )
{
document.getElementById('firstname').style.backgroundColor="#F00";
document.getElementById('error').style.display="block";
return false;
}
if ( document.getElementById('lastname').value == "" )
{
document.getElementById('lastname').style.backgroundColor="#F00";
document.getElementById('error').style.display="block";
return false;
}
if ( document.getElementById('sex').value == "" )
{
document.getElementById('sex').style.backgroundColor="#F00";
document.getElementById('error').style.display="block";
return false;
}
else {
document.getElementById('firstname').style.backgroundColor="#FFF";
document.getElementById('lastname').style.backgroundColor="#FFF";
document.getElementById('sex').style.backgroundColor="#FFF";
document.getElementById('personal').style.display="none";
document.getElementById('contact').style.display="block";
return true;
}
}
</script>

</head>

<body onload="document.getElementById('firstname').focus()">

<div id="header">
<h1>&nbsp;Membership with Accendo</h1>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><span id="current">Personal Details</span></li>
<li><span>Contact Details</span></li>
<li><span>About Yourself</span></li>
<li><span>What You're Looking For</span></li>
<li><span>Finish</span></li>

</ul>
</div>
</div>

<div id="container">

<form name="frm" id="frm" action="process.php" method="post" onsubmit="return Validate_Personal()">

<div id="personal">

<h2>Personal Details</h2>

<p id="error">ERROR: You have not filled out the required fields indicated below.</p>

<fieldset>

<legend>Name &amp; Gender</legend>

<div class="row">
<label class="col1"><span class="required">* </span>First Name(s):</label>
<span class="col2"><input type="text" name="firstname" id="firstname" size="23"
onFocus="trColorOn('firstname')" onBlur="trColorOff('firstname')" />
</span>
<label class="col3"><span class="required">* </span>Surname:</label>
<span class="col4"><input type="text" name="lastname" id="lastname" size="23"
onFocus="trColorOn('lastname')" onBlur="trColorOff('lastname')" />

</span>
</div>

<div class="row">
<label class="col1"><span class="required">* </span>Gender:</label>
<span class="col4">
<span class="radi">
<input type="radio" class="sex" name="sex" value="Male" />Male
<input type="radio" class="sex" name="sex" value="Female" />Female
</span>
</span>

</div>
</fieldset>

<p><input type="submit" value="Continue &gt;" /></p>

</div>

<div id="contact">

<h2>Contact Details</h2>

<p id="error">ERROR: You have not filled out the required fields indicated below.</p>

<fieldset>

<legend>Address</legend>
</fieldset>


</div>

</form>
</div>

</body>
</html>
The above works though server side validation should also be done. Here is the gist of my contact.php page

<h1 class="headerimg"><img src="images/contacthead.gif" width="300" height="75" alt="Contact" /></h1>
<!--Begin Content-->
<div id="content">
<?php
if(isset($_POST['submit']) && $_POST['submit'] == 'Submit') //if form has been submitted
{
//for now:

//get all the data from the form
$name= $_POST['name'];
$email = $_POST['email'];
//$usersubject = $_POST['subject'];
$comment = stripslashes($_POST['comment']);
$from="webmaster@prdesignz.com"; //this is what will appear in the from part in your email

$errors = '';
if($name == '')
{
$error .= "<span class=\"error\">You must enter your <label for=\"name\">name</label>.</span><br />";
}
if($email == '')
{
$error .= "<span class=\"error\">You must enter an <label for=\"email\">e-mail</label> address.</span><br />";
}
elseif(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$", $email)) //if email entered, verify format
{
$error .= "<span class=\"error\">Your <label for=\"email\">email</label> is not of valid format.</span><br />";
}
if($comment == '')
{
$error .= "<span class=\"error\">You must enter some <label for=\"comment\">comments</label>.</span><br />";
}
if($error == '') //If no errors
{
$sendTo = "apauloerau2003@yahoo.com"; //this will be the address that the mail gets sent to
$subject = "Mail from PR Designz";


$body = "You have received the following from the web based contact form:\r\n";
$body .= "---------------------------------------------------------------\r\n";
$body .= "Subject: Mail from Site\r\n";
$body .= "From: ".$email."\r\n";
$body .= "Questions:\r\n";
$body .= $comment ."\r\n";
$body .= "---------------------------------------------------------------\r\n";

$headers = 'From: '.$from."\r\n" .
'Reply-To: '.$email;
if(mail($sendTo, $subject, $body, $headers))
{
$success="<div class=\"error centertext\">E-mail sucessfully sent.<br />Thank you for contacting me.</div>";
$name='';
$email='';
$comment='';
}
else
{
$error = "<div class=\"error\"><span class=\"error\">Unfortunately, we were unable to send your e-mail. Please try again.</span></div>";
exit();
}
}
}
?>
<p class="centertext">Below is a contact form that you can use to submit your comments.<br />All fields are required.<br /><br /></p>
<?php
if(!empty($error))
{
echo "<div class=\"error\">\n";
echo "<h4>Uh oh! An error occurred...</h4>";
echo $error;
echo "</div>\n";
}
if(mail($sendTo, $subject, $body, $headers))
{
echo $success;
}
?>
<form method="post" action="<?php echo $_SERVER['SCRIPT_NAME']?>">
<fieldset id="emailform">
<legend id="legend">Contact Me</legend>
<label for="name">Name</label>
<input class="text" type="text" size="50" name="name" id="name" value="<?php echo $name; ?>" maxlength="50" />
<label for="email">Email</label>
<input class="text" type="text" size="50" name="email" id="email" value="<?php echo $email; ?>" maxlength="100" />
<p class="centertext"><a href="#" onclick="request();return false">Click here if you would like to request my web design services.</a></p>
<div id="web1">What language will the site need to be coded in?
<input class="text" type="text" size="50" name="lang" id="lang" maxlength="50" /></div>
<div id="web2">Will graphics be provided?<br />
<select class="text" name="graphics">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select></div>
<label for="comment">Comments</label>
<textarea class="text2" name="comment" id="comment" cols="5" rows="4"><?php echo $comment; ?></textarea>
<div class="input"><input class="buttons" type="submit" name="submit" value="Submit" />&nbsp;&nbsp;&nbsp;&nbsp;<input class="buttons" type="reset" value="Reset" /></div>
</fieldset>
</form>
</div>
<!--End Content-->

See it in action here (http://prdesignz.inraged-inc.com/contact.php).
As for your header problem, it just seems like you need to add a clearing div after your menu since you are floating it. You could add a height to your header would fix that problem as well.

mlseim
12-29-2005, 02:02 AM
Aerospace ...

I'm using Windows 98, IE 6.0.2600

I noticed that when I leave a box blank on your form
and click submit, I get a yellow triangle with "error on page"
in the lower left corner (status line) on my browser.

I'm guessing it's a Javascript error ... but it seems to work.
Guess I'm not sure what is failing. It only appears for a second
before the "Uh oh! An error occurred..." box appears.

Just thought I'd let you know.

_Aerospace_Eng_
12-29-2005, 03:56 AM
Okay thanks for that, I was using JS validation before but now I'm just using server side validation, I still had onsubmit="return check(this)" in my form tag so it was looking for that function but couldn't find it because it didn't exist. Its fixed now.

mark87
12-29-2005, 12:43 PM
Thanks Aerospace - a look in is always appreciated. Unfortunately I don't want to submit the form when it's been validated... as I mentioned in an above post, I want one section to be validated; once it is, section two is shown, that get's vaildated, section three gets shown... THEN the whole form gets submitted.

The Javascript you've provided will probably be of use anyway, so I'll see what I can do. ;)

mark87
12-29-2005, 01:18 PM
OK got it! In the end I've got exactly what I wanted.

You can see the example at http://www.markaylward.co.uk/registertest/ - only done the first two sections for now, but you'll see what I wanted to do.

I still can't get those tabs at the bottom of the header... any ideas?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum