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

时间：2016-04-03 04:02:11

标签： php jquery html bootstrapvalidator mail-form

您好我正在尝试使用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>

1 个答案:

答案 0 :(得分：1)

将表单设为gcnew System::String(yourCString)，然后在页面中添加以下代码：

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

希望这会有所帮助。

相关问题
最新问题