0

こんにちは、単純な php メール フォームに Boostrap Validator プラグインを使用しようとしていますが、何らかの理由で毎回正しく入力して送信を押します。私はそれを自分の Web ホスティングにアップロードしていますが、すべてチェックアウトする必要があります。現在、両方とも互いに独立して動作しますが、バリデーターを 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>
4

1 に答える 1