Jquery Validator und PHP-Mail-Formular funktioniert nicht

Hallo Ich versuche, das Boostrap Validator-Plugin für eine einfache PHP-Mail-Formular verwenden, aber aus irgendeinem Grund jedes Mal, wenn ich es richtig ausfüllen und drücken Sie senden. Ich lade es auf mein Webhosting hoch und alles sollte ausgecheckt werden. Momentan arbeiten beide unabhängig voneinander, aber wenn ich den Validator in das PHP-Formular einfüge, wird es nur validiert, aber verhindert, dass es gesendet wird. Ich bin nicht sehr gut mit PHP oder JQuery so kann mir bitte jemand sagen, was ich falsch mache?Jquery Validator und PHP-Mail-Formular funktioniert nicht

das ist mein PHP-Dokument

<?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>

Quelle

2016-04-03 user2072017

Nur ein freundlicher Tipp, möchten Sie vielleicht über diese Seite lesen: [How-To-Ask Leitfaden] (https://stackoverflow.com/help/how-to-ask) so können Sie immer sicher sein, dass Ihre Fragen sind leicht zu beantworten und so klar wie möglich. Stellen Sie sicher, dass Sie alle Anstrengungen unternommen haben, die Sie unternommen haben, um das Problem zu beheben, das Sie haben, und was passiert ist, als Sie diese Korrekturen versuchten. Vergessen Sie auch nicht Ihren Code und eventuelle Fehlermeldungen! –

Geben Sie Ihrem Formular ein class="validator-form" und fügen Sie den folgenden Code in Ihre Seite ein:

$(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'); 
    }); 
    });

ich hinzufügen Code für manual update, resetForm und ajax submit. Dieser Code hindert Sie nicht daran, das Formular zu senden. Reset-Taste wäre so etwas wie:

<button type="button" class="btn btn-info" id="resetBtn">Reset form</button>

Hoffe, das wird helfen.

Quelle

2016-04-03 09:43:08

Vielen Dank !!!! – user2072017

Jquery Validator und PHP-Mail-Formular funktioniert nicht

Antwort

Verwandte Themen