0

我是 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>
4

1 回答 1

0

你有一个空的submitHandler：

submitHandler: function(form) {

}

把它拿出来。

于 2013-02-25T05:46:25.533 回答