Jquery валидатор и php форма почты не работают
Привет, я пытаюсь использовать плагин Boostrap Validator для простой почтовой формы php, но по какой-то причине каждый раз, когда я правильно ее заполняю и нажимаю кнопку отправить. Я загружаю его на свой веб-хостинг, и все это должно проверить. Прямо сейчас они оба работают независимо друг от друга, но когда я добавляю валидатор в форму php, он просто проверяет его, но запрещает его отправку? Я не очень хорошо разбираюсь в php или jquery, так может кто-нибудь, пожалуйста, скажите мне, что я делаю не так?
это мой документ php
<?php
if (isset($_POST["submit"])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'Demo Contact Form';
$to = '[email protected]';
$subject = 'Message from Contact Demo ';
$body ="From: $name\n E-Mail: $email\n Message:\n $message";
// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
}
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}
//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage) {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="modal fade bs-example-modal-sm" id="feedback-result" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="alert alert-success text-center" style="margin-bottom:0;"><h4>Thank You! I will be in touch</h4></div></div></div></div>';
} else {
$result='<div class="modal fade bs-example-modal-sm" id="feedback-result" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="alert alert-danger text-center" style="margin-bottom:0;"><h4>Sorry there was an error sending your message. Please try again later.</h4></div></div></div></div>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Indiana Porter</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrapValidator.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
</head>
<body data-spy="scroll" data-target="#posts">
<style>figure{padding:10px 15px;}</style>
<?php echo $result; ?>
<div class="modal fade" id="feedback" tabindex="-1" role="dialog" aria-labelledby="feedbackLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="row"><div class="col-md-10 col-md-offset-1">
<div class="modal-header">
<h3 class="modal-title" id="feedbackLabel">Email me</h3>
</div>
<form class="form" id="feedbackForm" role="form" method="post" action="index.php">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="email" placeholder="Email" value="<?php echo htmlspecialchars($_POST['email']); ?>">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Message" rows="5"><?php echo htmlspecialchars($_POST['message']);?></textarea>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="sidebar">
<div class="row">
<div class="about text-center page-header">
<img src="https://web-answers.ru/wp-content/uploads/2019/02/me.jpg" class="img-circle" width="100px">
<h3>Indiana Porter</h3>
<small>art blog and other nonsense</small>
</div>
<div class="posts page-header text-center">
<h4>
<strong>Posts</strong>
</h4>
<div id="posts">
<ul class="nav nav-tabs nav-stacked">
<li class="active">
<a href="#010429161" class="page-scroll">Back to the future!</a>
</li>
<li>
<a href="#310320162" class="page-scroll">How about something... spacey</a>
</li>
</ul>
</div>
<br>
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#feedback">Email me</button>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
</div>
<h4 class="text-center">
<small>Copyright
<span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span>
Indiana Porter 2016
</small>
</h4>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/bootstrapValidator.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script>
function positionSidebar() {
if ($('.container').first().outerWidth() > 766) {
$('#sidebar').affix({});
} else {
$('#sidebar').removeClass('affix');
}
}
setInterval(positionSidebar, 300);
</script>
<script>
$(function() {
var $sidebar = $('#sidebar');
resize = function() { $sidebar.width($sidebar.parent().width()); };
$(window).resize(resize);
resize();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#feedback-result').modal('show');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#feedbackForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'name': {
validators: {
notEmpty: {
message: 'This is required and cannot be empty'
}
}
},
'message': {
validators: {
notEmpty: {
message: 'This is required and cannot be empty'
}
}
},
'email': {
validators: {
notEmpty: {
message: 'This is required and cannot be empty'
},
emailAddress: {
message: 'This not a valid email address'
}
}
}
}
});
});
</script>
</body>
</html>
Решение
Дайте вашу форму class="validator-form" и добавьте следующий код на свою страницу:
$(document).ready(function() {
$('.validator-form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name : {
message: 'Name is not valid',
validators: {
notEmpty: {
message: 'Name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'not less than 6 and not greater than 30'
}
}
},
message: {
validators: {
notEmpty: {
message: 'message is required and cannot be empty'
}
}
}
}
});
//validate the form manually
$('#validateBtn').click(function() {
$('#formName').bootstrapValidator('validate');
});// Reset the validation
$('#resetBtn').click(function() {
$('.validator-form').data('bootstrapValidator').resetForm(true);
});
$('#ajaxsubmit').bootstrapValidator().on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
Я добавляю код для manual update, resetForm а также ajax submit, Этот код не помешает вам отправить форму. Кнопка сброса будет что-то вроде:
<button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
Надеюсь, это поможет.
Другие решения
Других решений пока нет …