Jquery驗證和PHP郵件表格不工作

嗨我想使用Boostrap Validator插件爲一個簡單的PHP郵件形式，但由於某種原因，每當我正確地填寫和命中發送。我上傳到我的虛擬主機，這一切都應該檢查出來。現在他們都獨立於彼此工作，但是當我將驗證器添加到php表單時，它只是驗證它，但阻止它發送？我不是很擅長php或jquery，所以有人可以告訴我我做錯了什麼？Jquery驗證和PHP郵件表格不工作

這是我的PHP文件

<?php 
    if (isset($_POST["submit"])) { 
     $name = $_POST['name']; 
     $email = $_POST['email']; 
     $message = $_POST['message']; 
     $from = 'Demo Contact Form'; 
     $to = '[email protected]'; 
     $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>

來源

2016-04-03 user2072017

只是一個友好的提示，你可能想要閱讀本頁：[如何 - 問問指南]（https://stackoverflow.com/help/how-to-ask），所以你可以隨時確保你的問題很容易回答並儘可能清晰。一定要包括你爲解決你遇到的問題所做的任何努力，以及當你嘗試修復這些問題時發生了什麼。另外不要忘記你的代碼和任何錯誤信息！ –

給您的形式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>

希望這會有所幫助。

來源

2016-04-03 09:43:08

非常感謝你！ – user2072017

Jquery驗證和PHP郵件表格不工作

回答

相關問題