Hi I'm trying to use the Boostrap Validator plugin for a simple php mail form but for some reason every time i fill it out correctly and hit send. I am uploading it to my web hosting and it all should check out. Right now they both work independently of eachother but when I add the validator to the php form it just validates it but prevents it from sending? I'm not very good with php or jquery so can so someone please tell me what im doing wrong?
this is my php document
<?php
if (isset($_POST["submit"])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'Demo Contact Form';
$to = 'porterlou97@gmail.com';
$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="images/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>
Give your form a class="validator-form" and add the following code in your page:
$(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');
});
});
I add code for manual update, resetForm and ajax submit. This code will not prevent you from submitting form. Reset button would be something like:
<button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
Hope this will help.