php - Jquery验证库不提交值
问题描述
我正在尝试使用 jQuery 验证库制作联系表单。我想验证表单并将其发布到 php 文件中，并在没有页面加载的情况下显示响应。
我尝试了带有验证库的 jQuery：
这里contact.js
$('document').ready(function() {
/* handling form validation */
$("#contact-form").validate({
rules: {
full-name: "required",
email: {
required: true,
email: true
},
subject: "required",
phone: {
required: true,
digits: true
},
message: {
required: true,
minlength: 10,
maxlength: 2000
},
},
messages: {
full-name:{
required: "please enter your full name."
},
email:{
required: "please enter your email address",
email: "Please enter a valid email address"
},
subject: "Please enter a subject",
phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number"
},
message: "Please enter your message",
},
submitHandler: submitForm
});
/* Handling login functionality */
function submitForm() {
var data = $("#contact-form").serialize();
$.ajax({
type : 'POST',
url : 'process_contact.php',
data : data,
beforeSend: function(){
$("#notification").fadeOut();
$("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> sending ...');
},
success : function(response){
if(response=="ok"){
$("#submit-button").html(' Sending ...');
//setTimeout(' window.location.href = "dashboard.php"; ',4000);
} else {
$("#notification").fadeIn(1000, function(){
$("#notification").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#submit-button").html(' Send');
});
}
}
});
return false;
}
});
HTML 代码：（contact.html）
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>The Nest - Real Estate HTML Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/validation.min.js"></script>
<script src="js/contact.js"></script>
<!-- Custom stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" id="style_sheet" href="css/skins/default.css">
</head>
<body>
<div class="contact-1 content-area-7">
<div class="container">
<div class="main-title">
<h1>Contact Us</h1>
</div>
<div id="notification" class="notification-box"></div>
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
<!-- Contact form start -->
<div class="contact-form">
<form id="contact-form" method="post" name="contact-form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group fullname">
<input type="text" name="full-name" class="input-text" id="full-name" placeholder="Full Name">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group enter-email">
<input type="email" name="email" class="input-text" id="email" placeholder="Enter email">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group subject">
<input type="text" name="subject" class="input-text" id="subject" placeholder="Subject">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group number">
<input type="text" name="phone" class="input-text" id="phone" placeholder="Phone Number">
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
<div class="form-group message">
<textarea class="input-text" name="message" id="button" placeholder="Write message"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
<div class="form-group send-btn mb-0">
<button type="submit" id="submit-button" class="button-md button-theme">Send Message</button>
</div>
</div>
</div>
</form>
</div>
<!-- Contact form end -->
</div>
<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-6 col-xs-12">
<!-- Contact details start -->
<div class="contact-details">
<div class="main-title-2">
<h3>Our Address</h3>
</div>
<div class="media">
<div class="media-left">
<i class="fa fa-map-marker"></i>
</div>
<div class="media-body">
<h4>Office Address</h4>
<p>Vierra Property Broker
Office 714, Le Solarium, Dubai, United Arab Emirates</p>
</div>
</div>
<div class="media">
<div class="media-left">
<i class="fa fa-phone"></i>
</div>
<div class="media-body">
<h4>Phone Number</h4>
<p>
<a href="tel:0477-0477-8556-552">office: 0477 8556 552</a>
</p>
<p>
<a href="tel:+55-417-634-7071">Mobile: +55 417 634 7071</a>
</p>
</div>
</div>
<div class="media mb-0">
<div class="media-left">
<i class="fa fa-envelope"></i>
</div>
<div class="media-body">
<h4>Email Address</h4>
<p>
<a href="mailto:info@themevessel.com">info@themevessel.com</a>
</p>
<p>
<a href="http://themevessel.com" target="_blank">http://themevessel.com</a>
</p>
</div>
</div>
</div>
<!-- Contact details end -->
</div>
</div>
</div>
</div>
</body>
</html>
未显示任何验证错误和响应。我想先验证表单并提交到 php 文件并显示响应。
解决方案
图书馆问题是一个问题。
$('document').ready(function() {
/* handling form validation */
$("#contact-form").validate({
rules: {
'full-name': "required",
email: {
required: true,
email: true
},
subject: "required",
phone: {
required: true,
digits: true
},
message: {
required: true,
minlength: 10,
maxlength: 2000
},
},
messages: {
'full-name':{
required: "please enter your full name."
},
email:{
required: "please enter your email address",
email: "Please enter a valid email address"
},
subject: "Please enter a subject",
phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number"
},
message: "Please enter your message",
},
submitHandler: submitForm
});
/* Handling login functionality */
function submitForm() {
var data = $("#contact-form").serialize();
$.ajax({
type : 'POST',
url : 'process_contact.php',
data : data,
beforeSend: function(){
$("#notification").fadeOut();
$("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> sending ...');
},
success : function(response){
if(response=="ok"){
$("#submit-button").html(' Sending ...');
//setTimeout(' window.location.href = "dashboard.php"; ',4000);
} else {
$("#notification").fadeIn(1000, function(){
$("#notification").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#submit-button").html(' Send');
});
}
}
});
return false;
}
});<!DOCTYPE html>
<html lang="zxx">
<head>
<title>The Nest - Real Estate HTML Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<!-- Custom stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" id="style_sheet" href="css/skins/default.css">
</head>
<body>
<div class="contact-1 content-area-7">
<div class="container">
<div class="main-title">
<h1>Contact Us</h1>
</div>
<div id="notification" class="notification-box"></div>
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
<!-- Contact form start -->
<div class="contact-form">
<form id="contact-form" method="post" name="contact-form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group fullname">
<input type="text" name="full-name" class="input-text" id="full-name" placeholder="Full Name">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group enter-email">
<input type="email" name="email" class="input-text" id="email" placeholder="Enter email">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group subject">
<input type="text" name="subject" class="input-text" id="subject" placeholder="Subject">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="form-group number">
<input type="text" name="phone" class="input-text" id="phone" placeholder="Phone Number">
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
<div class="form-group message">
<textarea class="input-text" name="message" id="button" placeholder="Write message"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
<div class="form-group send-btn mb-0">
<button type="submit" id="submit-button" class="button-md button-theme">Send Message</button>
</div>
</div>
</div>
</form>
</div>
<!-- Contact form end -->
</div>
<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-6 col-xs-12">
<!-- Contact details start -->
<div class="contact-details">
<div class="main-title-2">
<h3>Our Address</h3>
</div>
<div class="media">
<div class="media-left">
<i class="fa fa-map-marker"></i>
</div>
<div class="media-body">
<h4>Office Address</h4>
<p>Vierra Property Broker
Office 714, Le Solarium, Dubai, United Arab Emirates</p>
</div>
</div>
<div class="media">
<div class="media-left">
<i class="fa fa-phone"></i>
</div>
<div class="media-body">
<h4>Phone Number</h4>
<p>
<a href="tel:0477-0477-8556-552">office: 0477 8556 552</a>
</p>
<p>
<a href="tel:+55-417-634-7071">Mobile: +55 417 634 7071</a>
</p>
</div>
</div>
<div class="media mb-0">
<div class="media-left">
<i class="fa fa-envelope"></i>
</div>
<div class="media-body">
<h4>Email Address</h4>
<p>
<a href="mailto:info@themevessel.com">info@themevessel.com</a>
</p>
<p>
<a href="http://themevessel.com" target="_blank">http://themevessel.com</a>
</p>
</div>
</div>
</div>
<!-- Contact details end -->
</div>
</div>
</div>
</div>
</body>
</html>我用在线链接更改了您的验证库，您可以做的是用这个代替您的验证库<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
推荐阅读
- fiware - 如何在 FIWARE 实体 (NGSI) 中定义警报事件
- excel - 一个 SUMIFS() #VALUE！当我尝试将 MONTH() 值的命名范围与 MONTH() 值进行比较时发生错误
- docker - 使用 Github 操作创建 Docker 容器不会更新 github 包中的包
- python - ffmpeg 将输出保存到 python 变量并在不写入多个文件的情况下进行进一步的 ffmpeg 操作
- python - 改变边时如何保持节点位置
- javascript - 请求完成后如何执行回调方法？
- android - 使用 android studio 工具运行测试和 gradle 运行测试有什么区别
- r - 如何在 aes() 中设置 ggplot2 默认点形状？
- conda - zsh：找不到命令：jupyter，使用了错误的代码
- javascript - 将闪电数据表与多条记录的内联编辑一起使用。从 LWC 的 then 方法中的验证规则中获取 Uncaught (in promise)