www.webdeveloper.com
Results 1 to 10 of 10

Thread: Form validation - changing style

  1. #1
    Join Date
    Nov 2006
    Posts
    250

    Form validation - changing style

    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.

  2. #2
    Join Date
    Feb 2005
    Location
    Tauranga
    Posts
    2,062
    Post your form and PHP and we can help you. Make sure you use the VB PHP tags.

  3. #3
    Join Date
    Nov 2006
    Posts
    250
    sorry, my bad...

    Form:
    HTML Code:
    <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 Code:
    <?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);
    ?>

  4. #4
    Join Date
    Feb 2005
    Location
    Tauranga
    Posts
    2,062
    here try this in replace of both pages.

    PHP Code:
    <?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>

  5. #5
    Join Date
    Nov 2006
    Posts
    250
    I couldn't get it to work for some reason...

  6. #6
    Join Date
    Feb 2005
    Location
    Tauranga
    Posts
    2,062
    does it give an error?


    works fine for me

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

  7. #7
    Join Date
    Nov 2006
    Posts
    250
    hmm I guess I did something wrong....

  8. #8
    Join Date
    Nov 2006
    Posts
    250
    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?

  9. #9
    Join Date
    Nov 2006
    Posts
    250
    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?

  10. #10
    Join Date
    Feb 2005
    Location
    Tauranga
    Posts
    2,062

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles