duana1986 2016-04-03 04:02
浏览 57
已采纳

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

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
 E-Mail: $email
 Message:
 $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条回答 默认 最新

  • doucheng3407 2016-04-03 09:43
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥30 python代码，帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条