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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Email form with simple validation output

    Hey everyone. I hope you can help me getting through this problem, because I have no idea of what else to try. I'm a web designer and sometimes modify Javascript, but my main focus is HTML and CSS, meaning I have no idea how to code in Javascript or how to write something from scratch in PHP.

    So I designed a form that works pretty well, and integrated a PHP and Javascript script to make it work. This is the form:

    Code:
        <form name="form" id="form" method="post" action="contact.php">
        <p>Hello,</p>
        <p>My name is <input type="text" name="name">, from <input type="text" name="location">, and I'd like to get in touch with you for the following purpose:</p>
        <p><textarea name="message" rows="10" ></textarea></p>
        <p>By the way, my email address is <input type="text" name="email" id="email" placeholder="john@doe.com">, and I can prove I'm not a robot because I know the sky is <input type="text" name="code" placeholder="Red, green or blue?">.</p>
    	<p title="Send this message."><input type="submit"  id="submit" value="Take care."></p>
        </form>
    And this is the script, in an external file called contact.php:

    Code:
    <?php
      $name = check_input($_REQUEST['name'], "Please enter your name.") ;
      $location = check_input($_REQUEST['location']) ;
      $message = check_input($_REQUEST['message'], "Please write a message.") ;
      $email = check_input($_REQUEST['email'], "Please enter a valid email address.") ;
      if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {die("E-mail address not valid");}
      if (strtolower($_POST['code']) != 'blue') {die('You are definitely a robot.');}
    
      $mail_status = mail( "my@email.com", "Hey!", "Hello,\n\n$message\n\nRegards,\n\n$name\n$location", "From: $email $name" );
      
      function check_input($data, $problem='')
    {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        if ($problem && strlen($data) == 0)
        {
            show_error($problem);
        }
        return $data;
    }
    
    function show_error($myError)
    {
    ?>
        <html>
        <body>
    
        <b>Please correct the following error:</b><br />
        <?php echo $myError; ?>
    
        </body>
        </html>
    <?php
    exit();
    }
    
        if ($mail_status) { ?>
          <script language="javascript" type="text/javascript">
          alert('Thank you for the message. I will try to respond as soon as I can.');
          window.location = '/about';
        </script>
    <?php
    }
        else { ?>
        <script language="javascript" type="text/javascript">
          alert('There was an error. Please try again in a few minutes, or send the message directly to aalejandro@bitsland.com.');
          window.location = '/about';
        </script>
    <?php
    }
    ?>
    So what it does is this: if everything's OK, it sends an email with "Hey!" as the subject, "[name]" as the sender, "Hello, [message]. Regards, [name], [location]" as the body, and a popup saying the message was delivered appears. If something fails, it outputs the error in a new address, so the user will have to go back to the form and correct the error.

    What I actually want to happen is this: if everything's OK, a <p> which was hidden beneath the form appears saying the message was delivered, or, alternatively, make the submit button gray out and confirm the message was delivered. I found a script to make this happen, but with "Please wait...", so the user can't resubmit the form.

    If there's an error, I'd like another <p> which was hidden to appear with the specific error, so there'd be many <p>'s hidden with different IDs. If possible, I'd also like to change the CSS style of the input field, specifically changing the border color to red, so it'd be a change in class for the particular field.

    --

    So in essence, I want the errors and the success messages to output in the same page as the form (without refresh), and a change of class in the input fields that have an error. It'd be great if the submit button could be disabled until all fields are filled correctly, but I don't know if this is possible.

    Thanks in advance, and please let me know if it'll be possible. :)

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    It's possible, but a lot of changes.

    You'd have to use AJAX to request that the PHP code send the email and then get a response back from the PHP code that tells the main page what to do. Your existing PHP mailer page would need several changes, of course.

    As a not so minor point, none of it would then work if the user has JavaScript disabled, so are you sure that doing this is a good idea?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    firebrewd (04-06-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    It's possible, but a lot of changes.

    You'd have to use AJAX to request that the PHP code send the email and then get a response back from the PHP code that tells the main page what to do. Your existing PHP mailer page would need several changes, of course.

    As a not so minor point, none of it would then work if the user has JavaScript disabled, so are you sure that doing this is a good idea?
    Thanks for the response. Well, what'd you recommend me to keep it simple and working without Javascript, but at least implement the error stuff? I find it tedious to have to go back and make the changes.

    Maybe something like just enabling the send button if the information is correct, and marking red the inputs that are wrong? If Javascript is disabled, then I suppose the button will always be clickable and nothing will change to red, but that can be resolved by a line saying all info is required.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    So now you are asking for something completely different?? That is, you want to do form field validation in JavaScript? Yes, you could do that, instead. Or, better, in addition to what you have now.

    There are tons of articles (or even postings in this forum) on using JavaScript for <form> validation. It's not terribly hard.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    So now you are asking for something completely different?? That is, you want to do form field validation in JavaScript? Yes, you could do that, instead. Or, better, in addition to what you have now.

    There are tons of articles (or even postings in this forum) on using JavaScript for <form> validation. It's not terribly hard.
    The concept isn't too different, but I suppose the implementation is. From a design point of view it's almost the same.

    Could you point me to an easy to follow one?


  •  

    Tags for this Thread

    Posting Permissions

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