Jquery Validation阻止了我的联系人表单加载确认页面,即使所有字段都有效


Jquery Validation has prevented my contact form from loading confirmation page even when all fields are valid

我是jquery和php的新手,在尝试将jquery验证和php服务器端验证添加到我正在工作的网站上的联系表单时遇到了困难。

我在页面中嵌入了Jquery validate.js,验证工作正常,但问题是表单填写正确,所有字段都有效。提交按钮不会继续到我的下一页显示确认消息和表单中的一些数据以进行澄清的页面。

我看过很多关于使用jquery验证和php的教程和问题,这些教程和问题可以在不刷新或转到另一个页面的情况下将数据提交到电子邮件地址。但是还没有找到一个简单的方法使这项工作在一个新加载的页面。

在我添加客户端jquery验证之前,表单提交得很好。验证似乎阻止了它的继续,尽管根据nextStep.php页面的要求,仍有一封电子邮件发送到我的电子邮件地址,但该页面没有显示。当javascript被禁用时,提交按钮会工作。

我喜欢validate.js让自定义规则和错误消息变得多么容易,所以如果可能的话,我更喜欢使用这种方法而不是其他javascript编码方法。

以下是contactForm.php和nextStep.php的代码。如有任何帮助,我们将不胜感激。

'contactFrom.php'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<meta name="google-site-verification" content="WJzOl7qm8SHqmzMTjrdQwqVgXRu-EUMnY3qYUdrcJhI" />
<meta name="keywords" content=" " />
<meta name=" " content=" " />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Custom Contact From</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">

 $(document).ready(function(){
 $('#contactForm').submit(function() {
 return $('#contactForm').valid();
 });
  $("#contactForm").validate({
         debug: false,
   rules: {
    firstName: "required",
    email: {
     required: true,
     email: true
    }
   },
   messages: {
    firstName: "Please enter your name.",
    email: "Please enter a valid email address.",
   },
   submitHandler: function(form) {
   }
  });
 });
</script>
<style type="text/css">
h1 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}
label, input[type=submit] {
    font-weight: bold;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 label.error {
    display: inline-block;
    color: #F60;
    clear: both;
    float: right;
    line-height: 16px;
    font-size: 13px;
    width: 380px;
    text-align: right;
    height: 20px;
    margin-top: 4px;
    font-weight: normal;
 }
.result {
    height: 300px;
    width: 300px;
}
#contactForm {
    margin: 20px;
    width:  360px;
    background-color: #F8F8F8;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 20px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
input[type=text], textarea {
    width: 350px;
    margin-bottom: 20px;
}
</style>

</head>


<div id="wrapper">      

<form class="contactForm" action="nextStep.php" method="post" name="contactForm" id="contactForm">
      <h1>Contact Form</h1>

<label for="firstName">First Name:</label>
<br>
<input name="firstName" type="text" value="" id="firstName" class="required"/>
<br><br>
<label for="surname">Surname:</label>
<br>
<input name="surname" type="text" value="" id="surname" class="required"/>
<br><br>

<label for="email">Email:</label>
<br>
<input name="email" type="text" value="" id="email" class="required email" />
<br><br>

<label for="phone">Telephone Number:</label>
<br>
<input name="phone" type="text" value="" id="phone" class="required" />

<br><br>
<label for="comments">Comments:</label>
<br>
<textarea name="comments" class="required" cols="40" rows="10" id="requirements"></textarea>
<br><br>

<input type="submit" value="Submit" />
</p>
</form>
</div> <!-- end of wrapper Div.-->

</body>
</html>

'nextStep.php'-这是在两组验证之后需要加载的页面,并且当前仅在禁用javascript的情况下加载。我使用了formtoemail.com的代码作为免费版本的表格到电子邮件联系表格。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contact Form - Complete (Next Step)</title>
<style type="text/css">
h1, p  {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#formComplete {
    width: 550px;
    margin: 20px;
    border: thin solid #999;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}
body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>
</head>


<?php
/* Email address for form data to be sent to */
$my_email = "contact@email.co.uk";
/* Page to return to after the form has been completed and confirmation page displayed. */
$continue = "index.php";

$errors = array();
// Server-side validation:
// Remove $_COOKIE elements from $_REQUEST.
if(count($_COOKIE)){foreach(array_keys($_COOKIE) as $value){unset($_REQUEST[$value]);}}
// Check all fields for an email header.
function recursive_array_check_header($element_value)
{
global $set;
if(!is_array($element_value)){if(preg_match("/(%0A|%0D|'n+|'r+)(content-type:|to:|cc:|bcc:)/i",$element_value)){$set = 1;}}
else
{
foreach($element_value as $value){if($set){break;} recursive_array_check_header($value);}
}
}
recursive_array_check_header($_REQUEST);
if($set){$errors[] = "You cannot send an email header.";}
unset($set);
// Validate email field.
if(isset($_REQUEST['email']) && !empty($_REQUEST['email']))
{
if(preg_match("/(%0A|%0D|'n+|'r+|:)/i",$_REQUEST['email'])){$errors[] = "Email address may not contain a new line or a colon.";}
$_REQUEST['email'] = trim($_REQUEST['email']);
if(substr_count($_REQUEST['email'],"@") != 1 || stristr($_REQUEST['email']," ")){$errors[] = "Email address is invalid";}else{$exploded_email = explode("@",$_REQUEST['email']);if(empty($exploded_email[0]) || strlen($exploded_email[0]) > 64 || empty($exploded_email[1])){$errors[] = "Email address is invalid";}else{if(substr_count($exploded_email[1],".") == 0){$errors[] = "Email address is invalid";}else{$exploded_domain = explode(".",$exploded_email[1]);if(in_array("",$exploded_domain)){$errors[] = "Email address is invalid";}else{foreach($exploded_domain as $value){if(strlen($value) > 63 || !preg_match('/^[a-z0-9-]+$/i',$value)){$errors[] = "Email address is invalid"; break;}}}}}}
}
// Check referrer is from same site.
if(!(isset($_SERVER['HTTP_REFERER']) && !empty($_SERVER['HTTP_REFERER']) && stristr($_SERVER['HTTP_REFERER'],$_SERVER['HTTP_HOST']))){$errors[] = "You must enable referrer logging to use the form.";}
// Check for a blank form.
function recursive_array_check_blank($element_value)
{
global $set;
if(!is_array($element_value)){if(!empty($element_value)){$set = 1;}}
else
{
foreach($element_value as $value){if($set){break;} recursive_array_check_blank($value);}
}
}
recursive_array_check_blank($_REQUEST);
if(!$set){$errors[] = "You cannot send a blank form. " ;}
unset($set);
// Display any errors and exit if errors exist.
if(count($errors)){foreach($errors as $value){print "$value<br>";} exit;}
if(!defined("PHP_EOL")){define("PHP_EOL", strtoupper(substr(PHP_OS,0,3) == "WIN") ? "'r'n" : "'n");}
// Build message.
function build_message($request_input){if(!isset($message_output)){$message_output ="";}if(!is_array($request_input)){$message_output = $request_input;}else{foreach($request_input as $key => $value){if(!empty($value)){if(!is_numeric($key)){$message_output .= str_replace("_"," ",ucfirst($key)).": ".build_message($value).PHP_EOL.PHP_EOL;}else{$message_output .= build_message($value).", ";}}}}return rtrim($message_output,", ");}
$message = build_message($_REQUEST);
$message = $message . PHP_EOL.PHP_EOL."-- ".PHP_EOL."";
$message = stripslashes($message);
$subject = "FormToEmail Comments";
$headers = "From: " . $_REQUEST['email'];
mail($my_email,$subject,$message,$headers);
?>

<div id="wrapper">
<div id="formComplete">


      <h1>Thank you for your comments we will get back to you very soon<?php print stripslashes($_REQUEST['FirstName']); ?>.</b></h1>
          <br>
    <p><a href="<?php print $continue; ?>">Return to home page.</a></p>

</div><!-- end #formComplete -->
</div><!-- end #Wrapper -->
</body>
</html>

您有一个空的submitHandler:

submitHandler: function(form) {
}

把它拿出来。