Jquery to server issue

Question

私は連絡フォームで働いています。フォームのユーザーフィールドがメールに送信されたい、 私はサーバーに送るためにPHPページを書きましたが、 tは理解し、私は本当にappricate誰かが私にアドバイス を与える可能性があります場合、これはJavascriptであるjQueryの関数を記述する方法です：

<?php 
if (isset($_POST['submit'])) { // Checking for submit form 

$my_email = 'roni.itzhaik@gmail.com'; // Change with your email address 

if ($_POST['submit'] == 'add') { 
    $name  = trim(strip_tags(addslashes($_POST['name']))); 
    $email  = trim(strip_tags(addslashes($_POST['email']))); 
    $message = trim(strip_tags(addslashes($_POST['message']))); 
      $phone   = trim(strip_tags(addslashes($_POST['phone']))); 

      $pattern_name = '/^[a-zA-Z]{2}/'; 
    $pattern_email = '/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/'; 
     $pattern_message = '/^[a-zA-Z0-9]{2}/'; 
      $pattern_phone = '/^([0-9]{9,10})/'; 



    if ($email != '' && $message != '' && $phone != ''&& $name != '') { 
     if (preg_match($pattern_email, $email)&& preg_match($pattern_name, $name)&& preg_match($pattern_message, $message)&& preg_match($pattern_phone, $phone)) { 
      $headers = 'From: ' . $email . "\r\n"; 
      $subject = 'Message from ' . $name; 
          $message_phone= $message.'Phone number: '.$phone; 


      mail($my_email, $subject, $message_phone, $headers); 

        echo 'success|<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Thank you! We will contact you shortly.</div>'; 

        } 
      elseif(!preg_match($pattern_email, $email)) { 
      echo 'error|<div class="email_error"></i></button>Please enter a valid email address.</div>'; 
     } 
        elseif(!preg_match($pattern_name, $name)) { 
      echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Name must be more then 2 letters.</div>'; 

     } 
        elseif(!preg_match($pattern_phone, $phone)) { 
      echo 'error|<div class="phone_error"></i></button>Phone must be 9-10 digits.</div>'; 

     } 
        elseif(!preg_match($pattern_message, $message)) { 
      echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Message must be more than 2 letters.</div>'; 

     } 
    } elseif ($name== ''&& $message != '' && $phone != '' && $email != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill name</div>'; 
    } 
      elseif ($phone== ''&& $message != '' && $name != '' && $email != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Phone number</div>'; 
    } 
      elseif ($message== '' && $phone != ''&& $name != '' && $email != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Massage</div>'; 
    } 
      elseif ($email== ''&& $message != '' && $phone != ''&& $name != '') { 
     echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Email address</div>'; 
    } 
      else{ 
       echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill all the fields</div>'; 
      } 
} 

} else { // Submit form false 
header('Location: index.html'); 
} 
?> 

HTML：

$('.x-contact-form').on('submit', function(e) { 
e.preventDefault(); 
var confere = new Confere({ 
rules: this 
}) 

confere.validate().then(function() { 

//submit your form 

}).catch(function(err) { 

//remove all errors notifications 
Object.keys(confere.options.rules).map(function(key){ 
    $(`.${key}-group`).removeClass('has-error'); 
    $(`.${key}-group`).addClass('has-success'); 
    $(`#${key}_error`).text(''); 
}); 

//add errors on fields that failed validation 
Object.keys(err.result).map(function(key) { 
    $(`.${key}-group`).addClass('has-error'); 
    $(`#${key}_error`).text(err.result[key][0].message); 
}); 
}); 
}); 

これはPHPです。

<form class="x-contact-form" style="max-width: 300px; margin: 10px"> 
<div class="form-group name-group"> 
<label>Name</label> 
<input class="form-control" name="name" data-rule="required|min:2|max:254" 
/> 
<span id="name_error" class="text-danger"></span> 
</div> 
<div class="form-group email-group"> 
<label>Email</label> 
<input class="form-control" name="email" data-rule="required|email|max:254" 
/> 
<span id="email_error" class="text-danger"></span> 
</div> 
<div class="form-group phone-group"> 
<label>Phone</label> 
<input class="form-control" name="phone" data-rule="required|min:9|max:10" 
/> 
<span id="phone_error" class="text-danger"></span> 
    </div> 
<div class="form-group message-group"> 
    <label>Message</label> 
<textarea class="form-control" name="message" data- 
rule="required|min:2|max:254"></textarea> 
<span id="message_error" class="text-danger"></span> 
</div> 
<input type="submit" class="btn btn-primary" id="btn" value="Send" /> 
</form> 

Answer 1

私は会議室を知っていないと、あまりにもわからないんだけど、私はあなたがのURLにあなたのHTMLフォームのaction属性を設定する必要があります

$('.x-contact-form').on('submit', function(e) { 
    e.preventDefault(); 
    var confere = new Confere({ 
     rules: this // not sure if this is correct 
    }); 
    confere.validate().then(() => { 
     this.submit(); 
     Object.keys(confere.options.rules).map(function(key){ 
      $(`.${key}-group`).removeClass('has-error'); 
      $(`.${key}-group`).addClass('has-success'); 
      $(`#${key}_error`).text(''); 
     }); 
    }).catch(function(err) { 
     Object.keys(err.result).map(function(key) { 
      $(`.${key}-group`).addClass('has-error'); 
      $(`#${key}_error`).text(err.result[key][0].message); 
     }); 
    }); 
}); 

Answer 2

のために働く必要があります以下だと思いますあなたのPHPファイル。また、メソッド属性をPOST