Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Form Validation

  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation

    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?

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    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?

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone? I'm sure there's a simple solution...

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    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
    Code:
    <a href="#" onclick="document.getElementById('frm').submit();return false" class="next" title="Next Page">Continue &gt;</a>
    Code:
    <!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
    PHP Code:
    <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.
    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.
    Last edited by _Aerospace_Eng_; 12-29-2005 at 04:05 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    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.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Last edited by _Aerospace_Eng_; 12-29-2005 at 04:00 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by mark87; 12-29-2005 at 02:44 PM.


  •  

    Posting Permissions

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