Я пытаюсь создать контактную форму с библиотекой проверки 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-файл и показать ответ.