2017-12-11 5 views
0

phpを使用して動的なウェブサイトを作成しようとしています。このサイトはフリードメインにアップロードされています。これは私の最初の実世界プロジェクトですので、できる限りベストに入れたいと思っています。私はモーダルを作成しました。そこにはフォームがあり、これを有効にし、ページをリフレッシュせずに、このフォームから取得します。しかし、なぜ私のmail()が働いていないのか分からない人は、私が間違っていることを教えてくれますか?jqueryフォームバリデータを作成するには

これは、モーダル内部の私の定型である:ここでは

<div class="modal fade" id="myModal" tabindex="-1" role="form" aria-labelledby="#modalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true">&times;</span> 
       </button> 
     <h3 class="modal-title " id="modalLabel">Send 
      <?php echo 
     $brandName; ?> a message</h3> 
     </div> 
     <div class="modal-body"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="thumbnail"> 
       <form action="contact_process.php" method="POST" role="form" autocomplete="off" class="form-container"> 
       <small> 
             <i class="text-center    
    text-danger">all fields are required</i> 
            </small> 

       <div class="form-group has-danger"> 
        <label class="sr-only" for="name">Name 
             </label> 
        <input type="text" name="name" placeholder="Your Name" class="form-control" id="mail-name" tabindex="1"> 
       </div> 
       <div class="form-group has-danger"> 
        <label class="sr-only" for="email">Email 
             </label> 
        <input type="email" name="email" placeholder="Your E-mail" class="form-control" id="mail-email" tabindex="2"> 
       </div> 
       <div class="form-group has-danger"> 
        <label for="tel" class="sr-only">Tell 
     no. 
             </label> 
        <input type="text" name="phone" placeholder="Your Phone Number" class="form-control" id="mail- 
       phone" tabindex="3"> 
       </div> 
       <div class="form-group has-danger"> 
        <label for="message" class="sr-only"> 
      </label> 
        <textarea class="form-control  
     form-textarea" placeholder="Message" rows="5" spellcheck="true" name="message" id="mail-message" tabindex="4"></textarea> 
       </div> 

       <input type="button" class="btn 
       btn-danger" data-dismiss="modal" aria-label="Close" value="Cancel" tabindex="5"> 

       <input id="mail-submit" type="submit" class="btn btn-primary" value="Send Message" name="submit" data- submit="...Sending" tabindex="6"> 
       <p class="form-msg"></p> 

       </form> 
      </div> 
      <!--END thumbnail--> 
      </div> 
      <!--END col--> 
     </div> 
     <!--END row--> 
     </div> 
     <!--modal-body--> 
    </div> 
    <!--modal-content--> 
    </div> 
    <!--modal-dialog--> 
</div> 
<!---modal--> 

This is the php form validation in my includes folder: 
<pre> 
     <?php 
     if (isset($_POST['submit'])) { 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $message = $_POST['message']; 

    $errorEmpty = false; 
    $errorEmail = false; 
     $errorPhone = false; 

    if (empty($name) || empty($email) || empty($phone) || empty($message)) { 
     echo "<span class='err'>Fill in all fields!</span>"; 
     $errorEmpty = true; 
    } 

     elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     echo "<span class='err'>Invalid email please make sure you enter a 
     valid email address!</span>"; 
     $errorEmail = true; 

    } 
     elseif (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}? 
    \d{3}[\s-]?\d{4}$/i",$phone)) { 
      echo "<span class='err'>Please enter only a valid phone number! 
    </span>"; 
      $errorPhone = true; 
     } 

    else{ 

     // add resipeants 
     $to = "[email protected]"; 

     // create subject 
     $subject = "$name sent you a message from www.djshumzy.com"; 

     // construct a message 
     $msg = "Name: $name\r\n"; 
     $msg .= "Email: $email\r\n"; 
     $msg .= "Tell: $phone\r\n"; 
     $msg .= "Message: \r\n$message"; 

     $msg = wordwrap($meg, 70); 

     //set mail header 
     $headers = "MINE-Version: 1.0\r\n"; 
     $headers .= "Content-type: text/plain; charset=1so-8859-1\r\n"; 
     $headers .= "From: $name <$email>\r\n"; 
     $headers .= "X-priority: 1\r\n"; 
     $headers .= "X-MSMail-priority: High1\r\n\r\n"; 

     mail($to, $subject, $msg, $headers); 

     } if (mail === 1) { 
     echo "<span class='suc'>Thank You!...Your Message has been Sent ! 
     </span>"; 

     } 


     } 
     ?> 

     <script> 
     $("#mail-name, #mail-email, #mail-phone,    
     #mail-message").removeClass("input-error"); 

    var errorEmpty = "<?php echo $errorEmpty; ?>"; 
    var errorEmail = "<?php echo $errorEmail; ?>"; 
    var errorPhone = "<?php echo $errorPhone; ?>"; 

    if (errorEmpty == true) { 
     $("#mail-name, #mail-email, #mail-phone, 
     #mail-message").addClass("input-error"); 
    } 

    if (errorEmail == true) { 
     $("#mail-email").addClass("input-error"); 
    } 
     if (errorPhone == true) { 
     $("#mail-phone").addClass("input-error"); 
    } 

    if (errorEmpty == false && errorEmail == false && errorPhone == false) { 
     $("#mail-name, #mail-email, #mail-phone, #mail-message").val(""); 
    } 
    </script> 

    </pre> 

は私のjqueryの検証である(.jsファイル)

$(document).ready(function() { 
    $("form").submit(function(event) { 
    event.preventDefault(); 
    var name = $("#mail-name").val(); 
    var email = $("#mail-email").val(); 
    var phone = $("#mail-phone").val(); 
    var message = $("#mail-message").val(); 
    var submit = $("#mail-submit").val(); 
    $(".form-msg").load("includes/contact_process.php", { 
     name: name, 
     email: email, 
     phone: phone, 
     message: message, 
     submit: submit 
    }); 
    }); 
});// END FORM VALIDATING 

私はこれを作るからメールに提出しなければならない何をしてください同時に検証することができます。

したがって、フォームは検証されますが、電子メールは送信されず、代わりにエラーメッセージが表示されます。

+0

問題を解決する前に、適切なやり方で、phpとhtmlを組み合わせないでください。 *第1ステップ!* – Pedram

+1

*第2ステップ!*簡単に[jQuery Validation Plugin]を使用する(https://jqueryvalidation.org/) – Pedram

答えて

0

使用https://jqueryvalidation.org/

$("#myform").validate({ 
 
    rules: { 
 
    field: { 
 
     required: true 
 
    }, 
 
    email: { 
 
     required: true, 
 
     email: true 
 
    } 
 
    }, 
 
    messages: { 
 
    field: "Please Enter Your Name", 
 
    email: "Please Enter Your Email Address" 
 
    } 
 
});
<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
 

 

 
<form id="myform"> 
 
<label for="field">Enter Name : </label> 
 
<input type="text" class="left" id="field" name="field"> 
 
<br/> 
 
<label for="email">Email Address: </label> 
 
<input type="text" id="email" name="email"> 
 
<br/> 
 
<input type="submit" value="Validate!"> 
 
</form>

このjQueryプラグインは、単純なクライアント側のフォームの検証が容易になります。

関連する問題