Php Jquery验证已阻止我的联系人表单加载确认页面,即使所有字段都有效
我是jquery和php新手,在我正在工作的网站上,我一直很难将jquery验证和php服务器端验证添加到联系人表单中 我在页面中嵌入了Jquery validate.js,验证工作正常,但问题是表单填写正确并且所有字段都有效。“提交”按钮不会继续到“我的下一页”。显示确认消息和表单中的部分数据以供澄清的页面 我已经看过很多关于使用jquery验证和php的教程和问题,它们可以在不刷新或转到其他页面的情况下将数据提交到电子邮件地址。但是,我们还没有找到一种简单的方法在新加载的页面中实现这一点 在添加客户端jquery验证之前,表单提交得很好。虽然nextStep.php页面仍会向我的电子邮件地址发送一封电子邮件,但该页面并未显示,但验证似乎阻止了它的继续。禁用javascript时,submit按钮可以工作 我喜欢validate.js使自定义规则和错误消息变得多么容易,因此如果可能的话,我更愿意使用这种方法而不是其他javascript编码方法 下面是contactForm.php和nextStep.php的代码。任何帮助都将不胜感激 'contactFrom.php'Php Jquery验证已阻止我的联系人表单加载确认页面,即使所有字段都有效,php,jquery,forms,validation,jquery-validate,Php,Jquery,Forms,Validation,Jquery Validate,我是jquery和php新手,在我正在工作的网站上,我一直很难将jquery验证和php服务器端验证添加到联系人表单中 我在页面中嵌入了Jquery validate.js,验证工作正常,但问题是表单填写正确并且所有字段都有效。“提交”按钮不会继续到“我的下一页”。显示确认消息和表单中的部分数据以供澄清的页面 我已经看过很多关于使用jquery验证和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>
来自的自定义联系人
$(文档).ready(函数(){
$('#contactForm')。提交(函数(){
返回$('#contactForm').valid();
});
$(“#联系人表单”)。验证({
调试:错误,
规则:{
名字:“必选”,
电邮:{
要求:正确,
电子邮件:真的
}
},
信息:{
名字:“请输入您的名字。”,
电子邮件:“请输入有效的电子邮件地址。”,
},
submitHandler:函数(表单){
}
});
});
h1{
字体系列:“投石机MS”,Arial,Helvetica,无衬线;
}
标签,输入[类型=提交]{
字体大小:粗体;
字体系列:“投石机MS”,Arial,Helvetica,无衬线;
}
标签错误{
显示:内联块;
颜色:#F60;
明确:两者皆有;
浮动:对;
线高:16px;
字体大小:13px;
宽度:380px;
文本对齐:右对齐;
高度:20px;
利润上限:4倍;
字体大小:正常;
}
.结果{
高度:300px;
宽度:300px;
}
#联系方式{
利润率:20px;
宽度:360px;
背景色:#F8;
垫面:5px;
右边填充:20px;
垫底:5px;
左侧填充:20px;
-webkit盒阴影:0 10px rgba(0,0,0,0.3);
-moz盒阴影:0 10px rgba(0,0,0,0.3);
盒影:0.10px rgba(0,0,0,0.3);
}
输入[类型=文本],文本区域{
宽度:350px;
边缘底部:20px;
}
联系方式
名字:
姓:
电邮:
电话号码:
评论:
'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>
联系人表单-完成(下一步)
h1,p{
字体系列:“投石机MS”,Arial,Helvetica,无衬线;
}
#形式完整{
宽度:550px;
利润率:20px;
边框:薄实线#999;
填充顶部:10px;
右边填充:20px;
垫底:10px;
左侧填充:20px;
}
身体{
字体系列:“投石机MS”,Arial,Helvetica,无衬线;
}
感谢您的评论,我们将很快回复您。
您有一个空的:
把它拿出来。你是对的,就是这样。非常感谢Sachlen
submitHandler: function(form) {
}