Jquery 验证器和 php 邮件表单不工作

Question

您好，我正在尝试将 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 = '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>

Answer 1

为您的表单添加一个 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>

希望这会有所帮助。

Jquery 验证器和 php 邮件表单不工作

Jquery validator and php mail form not working

html

php

jquery

mail-form

bootstrapvalidator