我的网站由几个文件组成。首先，我有index.html，我的表单详细信息位于其中。它包含JQuery，所以当用户按下提交时，网站会将填写的信息发送到一个.php文件中，该文件会处理所有信息（检查信息，如果信息正确，则将其上传到MySQL数据库）。html文件是在.css文件.的帮助下格式化的
所有这些都是正确的。JQuery、HTML页面或PHP文件中没有错误。
接下来，我想添加一个功能，它可以做以下两件事之一：
-
表单有三个必填文本字段。当用户未能填写其中任何一个，或未能通过位于.php文件中的电子邮件检查时，我希望看到出现错误的文本字段以红色突出显示（例如，文本字段的背景色应变为红色）。
-
成功后，该表单应被隐藏，而另一个表单（位于同一位置，但通过.css文件隐藏）将可见。这只包含一个标签，并有文字："提交成功。"
我对JQuery没有太多的经验，所以我很高兴看到JQuery调用.php文件已经工作了。即便如此，我还是不知道该如何着手解决上述问题。有人能给我一个简单的例子或解释如何继续吗？
Index.html文件：
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="resources/assets/styles.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contactForm").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('resources/assets/sharedatabase.php', $("#contactForm").serialize(), function(data) {
// $('#contactForm').hide();
$('#results').html(data);
});
}
});
});
</script>
</head>
<div class="form">
<div class="formcontainer">
<form action="" method="post" id="contactForm" name="contactForm">
<fieldset>
And so on...
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
...
}
*/
}
接下来，PHP文件：
if (($_SERVER['REQUEST_METHOD'] == 'POST' && ... $_SERVER['REQUEST_METHOD'] == 'GET')
{
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!empty($empty_name)) {
echo json_encode(array(
'error' => true,
'msg' => "Name"
));
exit;
}
elseif (!empty($empty_company)) {
echo json_encode(array(
'error' => true,
'msg' => "Company"
));
exit;
}
elseif (!empty($empty_email)) {
echo json_encode(array(
'error' => true,
'msg' => "Email"
));
exit;
}
else
{
echo json_encode(array(
'error' => true,
'msg' => "Something else went wrong."
));
exit;
}
}
}
//send
else
{
mysql_connect("site.nl", "username", "********") or die ('Error: ' . mysql_error());
mysql_select_db ("databasename") or die(mysql_error());
//creating values here
$query="xxxxx";
mysql_query($query) or die ('Error updating database');
mysql_close();
echo json_encode(array(
'error' => false,
));
exit;
}
?>
在提交数据之前，请检查所需字段。显示表单错误的最佳方法是简单地向表单项添加一个"error"类。
使用CSS，将错误类格式化为任意格式（表单字段上的红色背景或其他内容）。在jQuery中，您可以执行以下操作：
// Check form fields for error.
if($('#name').val == ""){
// Apply an error class.
$('#name').addClass("error");
}
// On a successful submission, hide the old form and show the new one.
$('#oldForm').hide();
$('#newForm').show();
如果没有看到您的提交代码，我无法为您提供更多帮助，但您可以使用AJAX进行后端验证并将结果传递给前端。这将允许您在显示新表单之前验证表单提交是否已进入数据库。