使用Jquery Form Plugin进行验证

Question

This is the first time I have attempted to make a form using jquery and php. I used the folks over at Mid Mo Design as an example but even with that tutorial am still having trouble getting it to do what I want. This is the code I have been using. As well as jquery 1.4.1 and jQuery Form Plugin 2.43. Any help would be greatly appreciated.

css

#scrollContact {
 border-top: double 1px #0D0D0D;
 padding: 100px 50px 50px 50px;
 background: #020303;
 position: relative;
 overflow: hidden;
 width: 924px;
 text-align: justify;
}
.contactInfo {
 float:left;
 width: 214px;
 margin-right: 10px;
 margin-top: 5px;
}

#contactForm {
 float: left;
 width: 700px;
}

#contactForm span {
 float: left;
 margin:5px;
 width: 455px;
}

input, textarea {
 -moz-border-radius:5px 5px 5px 5px;
 border:1px solid #001932;
 color:#BBBBBB;
 font:1.1em Verdana,Geneva,sans-serif;
 background: #0A0A0A;
}

input:hover, textarea:hover {
 border:1px solid #0278f2;
 background: #242424;
}
#contactForm span input {
 line-height:1.8em;
 width:430px;
 padding:11px 10px;
 margin: 0px 0px 10px 0px;
}

#contactForm input {
 line-height:1.8em;
 width:200px;
 padding:11px 10px;
 margin: 5px;
}

#contactForm textarea {
 height:190px;
 line-height:1.8em;
 width:430px;
 padding:10px;
}


.message {
background:#eee; 
color:#000;
display:none;
padding:10px;
height: 70px;
position: absolute;
bottom:0px;
}

Html

 <div id="scrollContact" name="scrollContact">
   <div class="title">
    <h2 class="titleContact">Contact</h2>
    <ul class="pagenav">
    <li class="pagenavTitle">Navigate To:</li>
    <li class="pagenavWork"><a title="work" href="#scrollWork">Work</a></li>
    <li class="pagenavServices"><a title="services" href="#scrollServices">services</a></li>
    <li class="pagenavAbout"><a title="about" href="#scrollAbout">about</a></li>
    <li class="pagenavContact"><a title="contact" href="#scrollContact">contact</a></li>
    </ul>
   </div>
   <div class="contactInfo">
   <strong>Get A Free Quote</strong><br />
   Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required. <br />
   <strong>What Next?</strong> <br />
   Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required.
   </div>


   <form action="bin/sendmail.php" method="post" id="contactForm">
    <span>
     <input type="text" name="contactTitle" value="" id="contactTitle" title="Subject" />
     <textarea rows="5" name="contactMessage">Your Message</textarea>
    </span>
    <input type="text" name="contactName" value="" id="contactName" title="Your Name"/>
    <input type="text" name="contactEmail" value="" id="contactEmail" title="Your Email"  />
    <input class="contactButton"  type="submit" name="submit" title="Submit Form"  />
   </form>


   <div class="message"><div id="alert"></div></div> 
  </div>

Php

       <?php
 $sendto = '[e-mail]';
 $subject = 'Contact from contact form';
 $errormessage = 'Oops! There seems to have been a problem. May we suggest...';
 $thanks = "Thanks for the email! We'll get back to you as soon as possible!";
 $honeypot = "You filled in the honeypot! If you're human, try again!";
 $emptyname =  'Entering your name?';
 $emptyemail = 'Entering your email address?';
 $emptytitle = 'Entering The Subject?';
 $emptymessage = 'Entering a message?';
 $alertname =  'Entering your name using only the standard alphabet?';
 $alertemail = 'Entering your email in this format: <i>[e-mail]</i>?';
 $alerttitle = 'Entering the subject using only the standard alphabet?';
 $alertmessage = "Making sure you aren't using any parenthesis or other escaping characters in the message? Most URLS are fine though!";
 $alert = '';
 $pass = 0;


 function clean_var($variable) {
     $variable = strip_tags(stripslashes(trim(rtrim($variable))));
   return $variable;
 }


 if ( empty($_REQUEST['last']) ) {


  if ( empty($_REQUEST['contactName']) ) {
   $pass = 1;
   $alert .= "<li>" . $emptyname . "</li>";
  } elseif ( ereg( "[][{}()*+?.\\^$|]", $_REQUEST['contactName'] ) ) {
   $pass = 1;
   $alert .= "<li>" . $alertname . "</li>";
  }
  if ( empty($_REQUEST['contactEmail']) ) {
   $pass = 1;
   $alert .= "<li>" . $emptyemail . "</li>";
  } elseif ( !eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $_REQUEST['contactEmail']) ) {
   $pass = 1;
   $alert .= "<li>" . $alertemail . "</li>";
  }
  if ( empty($_REQUEST['contactTitle']) ) {
   $pass = 1;
   $alert .= "<li>" . $emptytitle . "</li>";
  } elseif ( ereg( "[][{}()*+?.\\^$|]", $_REQUEST['contactTitle'] ) ) {
   $pass = 1;
   $alert .= "<li>" . $alerttitle . "</li>";
  }
  if ( empty($_REQUEST['contactMessage']) ) {
   $pass = 1;
   $alert .= "<li>" . $emptymessage . "</li>";
  } elseif ( ereg( "[][{}()*+?\\^$|]", $_REQUEST['contactMessage'] ) ) {
   $pass = 1;
   $alert .= "<li>" . $alertmessage . "</li>";
  }


  if ( $pass==1 ) {


  echo "<script>$(\".message\").hide(\"slow\").show(\"slow\"); </script>";
  echo "<b>" . $errormessage . "</b>";
  echo "<ul>";
  echo $alert;
  echo "</ul>";


  } elseif (isset($_REQUEST['message'])) {


      $message = "From: " . clean_var($_REQUEST['contactName']) . "
";
   $message .= "Email: " . clean_var($_REQUEST['contactEmail']) . "
";
      $message .= "Telephone: " . clean_var($_REQUEST['contactTitle']) . "
";
      $message .= "Message: 
" . clean_var($_REQUEST['contactMessage']);
      $header = 'From:'. clean_var($_REQUEST['contactEmail']);


   mail($sendto, $subject, $message, $header);

   echo "<script>$(\".message\").hide(\"slow\").show(\"slow\").animate({opacity: 1.0}, 4000).hide(\"slow\"); $(':input').clearForm() </script>";
   echo $thanks;

   die();


  }


 } else {
  echo "<script>$(\".message\").hide(\"slow\").show(\"slow\"); </script>";
  echo $honeypot;
 }
 ?>

Answer 1

here is a very very very good article for you. It will help you much.