PHP提交表单突出显示JQuery出错时的文本字段_Php_Jquery_Mysql_Html_Forms

PHP提交表单突出显示JQuery出错时的文本字段

php jquery mysql html forms

PHP提交表单突出显示JQuery出错时的文本字段,php,jquery,mysql,html,forms,Php,Jquery,Mysql,Html,Forms,我的网站由几个文件组成。首先，我有index.html，我的表单详细信息位于其中。它包含JQuery，因此当用户按submit时，站点将填写的信息发送到一个.php文件，该文件处理所有信息（检查信息，如果信息正确，将其上传到MySQL数据库）。html文件是在.css文件的帮助下格式化的所有这些都正常工作。JQuery、HTML页面或PHP文件中没有错误接下来，我想添加一个功能，它可以执行以下两项操作之一：表单有三个必需的文本字段。当用户未能填写其中任何一个，或者未能通过位于.php文件

我的网站由几个文件组成。首先，我有index.html，我的表单详细信息位于其中。它包含JQuery，因此当用户按submit时，站点将填写的信息发送到一个.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')
{
...
    }
    */
}

在提交数据之前，请检查所需字段。显示表单错误的最佳方法是简单地向表单项添加“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进行后端验证并将结果传递给前端。这将允许您在显示新表单之前验证表单提交是否已进入数据库。

您是通过AJAX提交表单，还是提交到PHP文件？我正在使用JQuery将表单数据发布到PHP文件。您可以使用

.done（）

和

fail（）

@Bondye我回家的时候会试试这个我走了这么远，但是我被卡住了。在PHP文件中验证后，如果提交成功，我如何将其传回HTML站点，或者，如果没有，什么文本字段有错误？显示da codez plz。我需要查看您的JavaScript（如何提交表单）和PHP.Cool的一部分，因此在JSON响应中，返回导致错误的字段的名称。然后在jQuery中，检查“error”是否为true，然后将error类添加到“field”中。

// 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();