如何添加AJAX提交到PHP验证和返回消息？_Php_Javascript_Jquery_Ajax_Validation

如何添加AJAX提交到PHP验证和返回消息？

php javascript jquery ajax validation

如何添加AJAX提交到PHP验证和返回消息？,php,javascript,jquery,ajax,validation,Php,Javascript,Jquery,Ajax,Validation,我一直在努力验证表单，并让JS和PHP验证工作正常，但我仍然很难添加ajax（有或没有JQUERY）以提交到PHP文件并返回成功消息使用CSS和JS验证的我的表单： <html> <head> <style type="text/css"> #nameerror { color:red; } #emailerror{ color:red; } </style> <script src="//ajax.googleapis.com/ajax/

我一直在努力验证表单，并让JS和PHP验证工作正常，但我仍然很难添加ajax（有或没有JQUERY）以提交到PHP文件并返回成功消息

使用CSS和JS验证的我的表单：

<html>
<head>
<style type="text/css">
#nameerror {
color:red;
}
#emailerror{
color:red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

function Validate()  {

var email = document.forms['form']['email'].value;
var atpos = email.indexOf('@');
var dotpos = email.lastIndexOf('.');
var name = document.forms['form']['name'].value;

if (name == null || name == ""){
document.getElementById('nameerror').innerHTML="Please enter your name";
return false;
} else if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.length) {

document.getElementById('emailerror').innerHTML="Please enter a valid email";
return false;
} else {

}   
}

</script>


</head>
<body>
<div>Sign Up</div>
    <form name="form" action="form_validation.php" id="form" onsubmit="return Validate();" method = 'post'> 
<label>Name:</label><br/>
<input id='name' type="text" name='name' /><br/>
<span id="nameerror"></span><br/>
<label>Email:</label><br/>
<input type='text' name='email' id = 'email'/> <br/>
<span id= "emailerror"></span><br/>
<label>Comments:</label><br/>
<textarea name='comments' id ='comments'></textarea><br/>
<span id="comerror"></span>
<input type="submit" name="submit" value="Submit"/>  
<span id="success" style="display:none">Your message has been sent successfully.</span>

</form>  
</body>
</html>


#名称错误{
颜色：红色；
}
#电子邮件错误{
颜色：红色；
}
函数验证（）{
var email=document.forms['form']['email'].value；
var atpos=email.indexOf（'@'）；
var dotpos=email.lastIndexOf（'.'）；
var name=document.forms['form']['name'].value；
如果（名称==null | |名称==“”）{
document.getElementById（'nameerror'）.innerHTML=“请输入您的姓名”；
返回false；
}else if（atpos<1 | | dotpos=email.length）{
document.getElementById（'emailerror'）.innerHTML=“请输入有效的电子邮件”；
返回false；
}否则{
}   
}
注册
名称：





电子邮件：





评论：



您的邮件已成功发送。

这是form_validation.php：

<?php

if(isset($_POST['submit'])){
if($_POST['name']){
    $name = $_POST['name'];
}
if(!preg_match('/^[a-zA-Z\s]+$/', $name)){
    echo "Name can only contain letters.";
    return false;
} else {
        echo "Name accepted";
}   

if($_POST['email']){
    $email = $_POST['email'];
}
$pattern = '/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/';
if(!preg_match($pattern, $email)){
    echo "Please enter a valid email address.";
    return false;
} else {
    echo "Email Valid";
}
if($_POST['comments']){
    $comments = $_POST['comments'];     
}
if (strlen($comments) > 100){
    echo "please enter less than 100 characters.";
    return false;
} 
}

?>

谢谢你的帮助

您需要代码的地方有一个很大的漏洞。我已经将它添加到我的代码中，并在span标记中显示一条成功消息，但它所做的只是重新路由到我的form_validation.php。我怎么能只停留在表单页面上？

$('form').on('submit',function() {

$.ajax({
       url: 'form_validation.php',
       data: $(this).serialize(),
       type: 'POST'
            }).done(function(data){

                  // you can append a success message to your document here

            });


                                  });