【发布时间】：2014-01-25 16:42:05
【问题描述】：
我有一个联系表单，当点击提交时，我希望得到验证。
如果所有字段都返回有效，那么我希望 AJAX 返回一个 正在处理 消息，然后，当成功时，会出现一条带有估算名称的消息。
我的表单内容是：
<form onsubmit="return validateForm">
<input id="fname" class="textbox" name="fname" placeholder="First Nname" type="text" required="required" /><p>
<input id="sname" class="textbox" name="sname" placeholder="Surname" type="text" required="required" /><p>
<input id="email" class="textbox" name="email" placeholder="Email Address" type="email" required="required" /><p>
<input id="number" class="textbox" name="number" placeholder="Contact Number" type="email" /><p>
<textarea rows="10" id="message" class="textarea" name="message" placeholder="Message" required="required" ></textarea><p>
<input fname="myBtn" class="button" type="submit" value="Submit" onClick="javascript:ajax_post();">
我的表单验证内容是：
function validateForm()
{
var fname=document.forms["Form"]["fname"].value;
var sname=document.forms["Form"]["sname"].value;
var x=document.forms["Form"]["email"].value;
var telnum=document.forms["Form"]["telnum"].value;
var message=document.forms["Form"]["message"].value;
if(fname==null||fname=="")
{
alert("please enter your first name");
return false;
}
if(sname==null||sname=="")
{
alert("please enter your surname");
return false;
}
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if(atpos<1||dotpos<atpos+2||dotpos+2>x.lenght)
{
alert("Not a valid email address.");
return false;
}
if(message==null||message=="")
{
alert("please enter a message");
return false;
}
}
AJAX 脚本是：
function ajax_post(){
var hr = new XMLHttpRequest();
var url = "/additional/formfeedback.php";
var fname = document.getElementById("fname").value;
var vars = "fname="+fname;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("status").innerHTML = "Processing...";
}
而返回的PHP为：
<?php
echo 'Thank you '. $_POST['fname'] . ', we have recieved your message and will be back in touch shortly';
?>
当提交按钮被点击时，PHP内容被返回，然后验证开始——显然为时已晚。
如何正确验证此内容，然后执行 AJAX 脚本？我不想使用任何额外的库，比如 jQuery。提前致谢。
【问题讨论】：
-
你有什么理由避免使用 jQuery 吗？它可以让您的生活更轻松。
标签： javascript html ajax