Form validation - changing style

[novemberGrey]

On a form for my website I want the labels for the form fields to change CSS styles depending on if the user filled out that field correctly. So pretty much if the user filled out the form but left one field blank the label for that field would turn red.

[Sheldon]

Post your form and PHP and we can help you. Make sure you use the VB PHP tags.

[novemberGrey]

sorry, my bad...

Form:

<form action="action.php" method="POST" name="webForm" id="contactForm">
<label>Full Name:*</label><input name="name" type="text" class="field">
<label>E-mail Address:*</label><input name="email" type="text" class="field" >
<ul>
<li class="title">Purpose:*</li>
<li class="radio"><label><input type="radio" name="purpose" value="general" onclick="enable()"/>General Information</label></li>
<li class="radio"><label><input type="radio" name="purpose" value="issue" onclick="enable()"/>Website Issue</label></li>
<li class="radio"><label><input type="radio" name="purpose" value="staff" onclick="enable()"/>Contact Staff Member</label></li>
</ul>
<span id="sendTo">Staff Member:*</span>
<select name="staff" id="member" DISABLED>
<option value="0">Person 1</option>
<option value="1">Person 2</option>
<option value="2">Person 3</option>
<option value="3">Person 4</option>
</select><br/>
<label>Subject:</label><input name="subject" type="text" class="field" >
<label id="message">Message:*</label><textarea name="message" id="messageBox"></textarea>
<input type="submit" value="Submit" class="button">
<input type="reset" value="Reset" class="button" onclick="disable()">
</form>

PHP:

<?php
$staffEmails = array(
   'example1@example.com',
   'example2@example.com',
   'example3@example.com');

switch ($_POST['purpose']){
case general:
$to  =  "information@example.com";
break;

case staff:
$to = isset($_POST['staff']) && array_key_exists($_POST['staff'], $staffEmails) ? $staffEmails[$_POST['staff']] : $_POST[0];
break;

case issue:
$to  =  "website@example.com";
break;
}

$subject = $_POST['subject'];
$fullName = $_POST['name'];
$senderEmail = $_POST['email'];
$senderMessage = $_POST['message'];
$notice = "*Required field";

$body = "Full Name: $fullName\n E-mail Address: $senderEmail\n Message: $senderMessage";

mail($to, $subject, $body);
?>

[Sheldon]

here try this in replace of both pages.

<?php

$staffEmails = array(
   'example1@example.com',
   'example2@example.com',
   'example3@example.com');

$message = "";
if(isset($_POST['submit'])){
    if(empty($_POST['name'])){ 
        $class1   = " class=\"error\""; 
        $c        = "1";
    }else{ 
        $fullName = $_POST['name'];
    }
    if(empty($_POST['email'])){ 
        $class2   = " class=\"error\""; 
        $c        = "2";
    }else{ 
        $senderEmail = $_POST['email'];
    }
    if(!empty($_POST['purpose'])){
        $purpose  = $_POST['purpose'];
    }else{
        $class3   = " class=\"error\"";
        $c        = "3"; 
    }
    if(empty($_POST['member'])){ 
        $class4   = " class=\"error\""; 
        $c        = "4";
    }else{ 
        $member   = $_POST['member'];
    }
    if(empty($_POST['subject'])){
        $class5   = " class=\"error\""; 
        $c        = "5"; 
    }else{ 
        $subject  = $_POST['subject']; 
    }
    if(empty($_POST['message'])){
        $class6   = " class=\"error\""; 
        $c        = "6"; 
    }else{ 
        $senderMessage  = wordwrap($_POST['message'], 20, "\n", true); 
    }

    switch($purpose){
        case "general":
            $to  =  "information@example.com";
        break;

        case "staff":
            $to = isset($_POST['staff']) && array_key_exists($_POST['staff'], $staffEmails) ? $staffEmails[$_POST['staff']] : $_POST[0];
        break;

        case "issue":
            $to  =  "website@example.com";
        break;
    }

    if(empty($c)){
        $headers       =  "FROM: {$to}";
        $notice        =  "*Required field";
        $body          =  "Full Name: {$fullName}"."\n".
                          "E-mail Address: {$senderEmail}"."\n".
                          "Message: {$senderMessage}.";

            mail($to, $subject, $body,$headers);
            $message   = "<p>Your mail has been sent.</p>";
    }else{
        $message = "<p>There has been an error.</p>";
    }
}
        
?><!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    
    <style type="text/css" media="screen">
        .error {background: #661122;}
    </style>

</head>

<body>
    <?php echo($message); ?>
    <form action="<?php echo(basename(htmlentities($_SERVER['PHP_SELF']))); ?>" method="POST" name="webForm" id="contactForm">
        <label<?php echo($class1); ?>>Full Name:*</label><input name="name" type="text" class="field">
        <label<?php echo($class2); ?>>E-mail Address:*</label><input name="email" type="text" class="field" >
        <ul<?php echo($class3); ?>> 
            <li class="title">Purpose:*</li> 
            <li class="radio"><label><input type="radio" name="purpose" value="general" onclick="enable()"/>General Information</label></li> 
            <li class="radio"><label><input type="radio" name="purpose" value="issue" onclick="enable()"/>Website Issue</label></li> 
            <li class="radio"><label><input type="radio" name="purpose" value="staff" onclick="enable()"/>Contact Staff Member</label></li> 
        </ul> 

        <span id="sendTo"<?php echo($class4); ?>>Staff Member:*</span> 

        <select name="staff" id="member" DISABLED> 
            <option value="0">Person 1</option> 
            <option value="1">Person 2</option> 
            <option value="2">Person 3</option> 
            <option value="3">Person 4</option> 
        </select>
        <br/> 

        <label<?php echo($class5); ?>>Subject:</label><input name="subject" type="text" class="field" > 
        <label<?php echo($class6); ?> id="message">Message:*</label><textarea name="message" id="messageBox"></textarea> 

        <input type="submit" name = "submit" value="Submit" class="button"> 
        <input type="reset" value="Reset" class="button" onclick="disable()"> 
    </form>

</body>
</html>

[novemberGrey]

I couldn't get it to work for some reason...

[Sheldon]

does it give an error?


works fine for me

http://www.inboxdesign.co.nz/test16

[novemberGrey]

hmm I guess I did something wrong....

[novemberGrey]

hey, it's working...I was just typing in something wrong, thanks for your help! One last question...how can I get it so when they press reset it will go back to normal?

[novemberGrey]

and also the Staff Member select box is only required if the user selects "Contact Staff Member" as the purpose, how can I make that work?

[Sheldon]

Javascript!