2013-02-07 41 views
0

我一直在驗證表單上工作,並獲得JS和PHP驗證工作,但我仍然很難添加ajax(有或沒有JQUERY)提交到PHP文件並返回成功消息。如何添加AJAX提交給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> 

這是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; 
} 
} 

?> 

感謝您的幫助!

+0

有一個大的漏洞,你需要代碼。 – Jerry

回答

0
$('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 

      }); 


            }); 
+0

我已將它添加到我的代碼中,並顯示一個成功消息以顯示span標記,但它所做的是重新路由到我的form_validation.php。我怎麼才能留在表單頁面上? – user1985436