请考虑这种替代方法的优势。您可以使用多个“页面”设置您的预订表单，这些“页面”仅向用户显示为页面。
jsFiddle example
也就是说，对于用户来说，他/她会从一个屏幕转到下一个屏幕，但这将是由 javascript（例如 jQueryUI 选项卡）创建的一种错觉。实际上，所有字段都在相同的页面/相同的表单中，就像在 jsFiddle 中一样。然后，您可以在用户点击提交按钮时收集所有信息：
- 验证所有字段均已填写；
- 验证字段中数据的正确格式；
- 如果有任何问题，(1) 通过
alert() 或jQueryUI 对话框显示消息，(2) 通过return false; 将用户发送回表单
- 如果没有问题，请通过以下方式提交表单：
$('#IdOfForm').submit();
通过在客户端进行所有数据收集和验证，您可以大大简化您的 PHP 代码。 此外，如果用户被送回完整的遗漏字段，他们迄今为止输入的所有数据仍然存在......
请注意，您仍然必须在 PHP 端验证数据以防止 SQL 注入。 See this article 和 this SO Post 了解更多信息。
独立的工作代码示例：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
var arrFormFields = ['cn','ca','ce','cp','dd','rd'];
$("#tabs").tabs();
$("#theMsg").dialog({
autoOpen: false,
});
$('#doit').click(function() {
for (var fld in arrFormFields) {
if ( $('#' + arrFormFields[fld]).val() == ''){
console.log('Var ' +arrFormFields[fld]+ ' has value: ' + $('#'+arrFormFields[fld]).val() );
$('#' + arrFormFields[fld]).css({'border':'1px solid red','background':'yellow'})
$('#ui-id-1').trigger('click');
$('#' + arrFormFields[fld]).focus();
alert('Please complete all fields'); //For some reason the alert isn't displaying
return false;
}else{
//Submit form to "dothebooking.php", like this:
//$('#TripForm').submit();
$('#theMsg').html('<h2>Form was successfully submitted</h2>');
$('#theMsg').dialog({'title':'Notice'}).dialog('open');
}
}
});
$('input:text').blur(function() {
$("input:not(:button)").css({'border':'1px solid grey','background':'white'});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Customer Details</a></li>
<li><a href="#tabs-2">Trip Details</a></li>
<li><a href="#tabs-3">Trip Options</a></li>
</ul>
<form id='TripForm' action="dothebooking.php" method="POST">
<div id="tabs-1">
Customer Name: <input type='text' id="cn"><br>
Customer Address: <input type='text' id="ca"><br>
Customer Email: <input type='text' id="ce"><br>
Customer Phone: <input type='text' id="cp"><br>
</div><!-- #tabs-1 -->
<div id="tabs-2">
Departure Date: <input type='text' id="dd"><br>
Return Date: <input type='text' id="rd"><br>
</div><!-- #tabs-2 -->
<div id="tabs-3">
Guided Tour option <input type='checkbox' id="gt"><br>
Presidential Suite <input type='checkbox' id="ps"><br>
Bed and Breakfast <input type='checkbox' id="bb"><br>
<input type='button' id="doit" value="Submit Trip"><br>
</div><!-- #tabs-3 -->
</form><!-- #TripForm -->
</div><!-- #tabs -->
<div id="theMsg"></div>
</body>
</html>
您可能也对jQuery validation plugin 感兴趣。
Check out these demos 快速浏览/查看。