SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modal Contact Form Validation with Twitter Bootstrap

    I think this is the correct forum topic so I apologise if not.

    I have an included header.php which is home to my navigation. I was hoping to that instead of having a standard contact page I would have a flashy jquery modal box appear housing the contact form with validation. Thankfully Twitter bootstrap provides this and I can display the modal. I also am using the jquery.validate.pack.js to validate the form which is working. My problem is that once the submit button is clicked on the modal, it disappears and there is no indication of the form being submitted or any errors. However if I open the modal up I can see the error if fields are missing.

    How can I keep the modal open to display any errors or a success message?

    Here's my code which is from a tutorial at this address http://codehunterbd.wordpress.com/20...ry-validation/

    header.php

    Code:
    <?php
    if ($_POST['go'] == 2) {
    
            $subject = 'Website Enquiry';
        
            //Check to make sure that the name field is not empty
            if(trim($_POST['contactname']) == '') {
                $hasError = true;
            } else {
                $name = trim($_POST['contactname']);
            }
    
            //Check to make sure sure that a valid email address is submitted
            if(trim($_POST['email']) == '')  {
                $hasError = true;
            } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
                $hasError = true;
            } else {
                $email = trim($_POST['email']);
            }
    
            //Check to make sure comments were entered
            if(trim($_POST['message']) == '') {
                $hasError = true;
            } else {
                if(function_exists('stripslashes')) {
                    $comments = stripslashes(trim($_POST['message']));
                } else {
                    $comments = trim($_POST['message']);
                }
            }
    
            //If there is no error, send the email
            if(!isset($hasError)) {
                $emailTo = 'email-here'; //Put your own email address here
                $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
                $headers = 'From: Test Site<'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
    
                mail($emailTo, $subject, $body, $headers);
                $emailSent = true;
            }
        }
    ?>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Bootstrap default</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
      </head>
    
      <body>
          
    <div class="navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="brand" href="index.php"> Default</a>
              <div class="nav-collapse collapse">
                <ul class="nav">
                  <li class="active"><a href="index.php">Home</a></li>
                  <li><a href="about.php">About</a></li>              
                  <li><a href="#contact" data-toggle="modal">Contact Us</a></li>
                  <li><a href="products.php">Products</a></li>
                  <li><?php include 'includes/searchbox.php';?></li>
                </ul> 
              </div><!--/.nav-collapse -->
              
            </div>
          </div>
        </div>
        
        <div id="contact" class="modal hide fade in modal-wrapper" style="display: none; ">  
            <div class="modal-header">  
                <a class="close" data-dismiss="modal"></a>  
                <h3>Contact-Us</h3>  
            </div>  
            <div class="modal-body">
                
                <?php if(isset($hasError)) { //If errors are found ?>
                <p>Please check if you've filled all the fields with valid information. Thank you.</p>
                <?php } ?>
    
                <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
                <p><strong>Email Successfully Sent!</strong></p>
                <p>Thank you. Your email was successfully sent and I will be in touch with you soon.</p>
                <?php } ?>
                    
                <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-horizontal" id="contactform">
                    <div class="control-group">
                        <div class="controls">
                            <label for="name"><strong>Name:</strong></label>
                            <input class="frminput" type="text" name="contactname" id="contactname" placeholder="Your name">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <label for="email"><strong>Email:</strong></label>
                            <input class="frminput" type="text" name="email" id="email" placeholder="Your email address">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <label for="message"><strong>Message:</strong></label>
                            <textarea class="frminput" name="message" id="message" rows="3" placeholder="Your message."></textarea>
                        </div>
                    </div>
                    <div class="pull-right">
                        <input type="hidden" name="save" value="contact">
                        <input type="hidden" name="go" value="2">
                        <button type="submit" id="contact-submit" class="btn btn-success">Send</button>
                        <a href="#" class="btn" data-dismiss="modal">Close</a>
                    </div>
                </form>
            </div>  
        </div>
    Here's my javascript which is included in my footer.php page

    Code:
    <script type="text/javascript">
            $(document).ready(function(){
                    $("#contactform").validate();
            });
    </script>
    Any help with this would be great. Been going round in circles for two days now trying to get it to work.

  2. #2
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please ignore this thread or close it as I've got it working. What I needed to do was give the input fields a class of 'required'. I had done this before but I must have missed something. Working fine now.


Tags for this Thread

Bookmarks

Posting Permissions

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