页面中的PHP表单验证

我已经成功创建了一个PHP表单，它将信息提交到一个逗号分隔的

csv

文件中。但是，我不喜欢它处理错误/无效提交的方式

我不希望它重新加载页面，如果用户没有输入其中一个必填字段，则清除用户输入的输入字段

相反，我希望在同一页上显示错误消息，而不重新加载该页，从而保持用户输入的所有文本的完整性

我不知道如何成功地做到这一点。我不介意将form.php和csv.php合并到一个文件中，但我也不确定如何成功地做到这一点

最好的方法是什么（在一个文件中或使用两个单独的文件，例如form.php和csv.php）

我该怎么做

谢谢

form.php

信息
红色的项目是必需的
教育

csv.php

这是一种方法

将onchange（）事件处理程序添加到每个文本输入：

<h3>INFORMATION</h3>
<h6>Items in red are required</h6>
  <form action="csv.php" method="post">
  <table width="100%">
    <tr>
      <td><input type="text" id="input_required" name="firstname" size="24" maxlength="30" placeholder="First name"  onchange=validate(1)" /> 
      <input type="text" name="initial" size="4" maxlength="4" placeholder="Initial" /> 
      <input type="text" id="input_required" name="lastname" size="24" maxlength="40" placeholder="Last Name" onchange=validate(2)"  />
      </td></tr>
    <tr><td><input type="text" name="firm" size="80" maxlength="254" placeholder="Firm or Business" onchange=validate(3)" /></td>    </tr>
    <tr><td><input type="text" name="address" size="80" maxlength="254" placeholder="Street Address" onchange=validate(4)"  /></td>    </tr>
    <tr>
      <td><input type="text" name="city" size="28" maxlength="30" placeholder="City" onchange=validate(5)"  /> 
      <input type="text" id="input_required" name="state" size="4" maxlength="2" placeholder="State" onchange=validate(6)"  />  
      <input type="text" name="zip" size="8" maxlength="8" placeholder="Zip Code" onchange=validate(7)"  /></td>
    </tr>
    <tr>
      <td><input type="text" id="input_required" name="phone" size="35" maxlength="254" placeholder="Telephone" onchange=validate(8)"  /> 
      <input type="text" name="fax" size="35" maxlength="254" placeholder="Fax" onchange=validate(9)"  /></td>
    </tr>
    <tr>
      <td><input type="text" name="cell" size="35" maxlength="254" placeholder="Cell" onchange=validate(10)"  /> 
      <input type="text" id="input_required" name="email" size="35" maxlength="254" placeholder="E-mail" onchange=validate(11)"  /></td>
    </tr>
    <tr>
      <td><input type="text" name="website" size="80" maxlength="254" placeholder="Website" onchange=validate(12)"  /></td>
    </tr>
  </table>
  <h3>EDUCATION</h3>
  <table width="100%">
    <tr>
      <td><input type="text" name="university" size="80" maxlength="254" placeholder="College or University" onchange=validate(12)"  /> 
      <input type="text" name="degree" size="28" maxlength="254" placeholder="Degree Received" onchange=validate(13)"  /> 
      <input type="text" name="degreeyr" size="4" maxlength="4" placeholder="Year" onchange=validate(14)"  /></td>
    </tr>
    <tr>
      <td><input type="text" name="jurisdiction" size="80" maxlength="254" placeholder="Jurisdiction where admitted to practice" onchange=validate(15)" /> 
      <input type="text" name="jurisdictionyr" size="4" maxlength="4" placeholder="Year" onchange=validate(16)" />
    </tr>
  </table>          
  <input type="submit" value="Submit" name="submit"> 
  <input id="button" name="Reset" type="reset" value="Reset">
  <?php
    include "csv.php";
  ?>
  </form>

信息
红色的项目是必需的
教育
无页面加载

您必须学习AJAX来帮助您使用PHP进行验证
使用类似JavaScript的错误答案进行验证
带页面加载

为了避免在页面加载后清除用户输入数据：合并csv.php和form.php并编辑输入标记，如：

<input type="text" id="input_required" name="firstname" size="24"
maxlength="30" placeholder="First name" value="<?php echo $_POST["firstname"]; ?>">

您需要学习一点关于AJAX的知识。如果您在使用ajax时遇到困难，请发布一个更具体的问题。
<h3>INFORMATION</h3>
<h6>Items in red are required</h6>
  <form action="csv.php" method="post">
  <table width="100%">
    <tr>
      <td><input type="text" id="input_required" name="firstname" size="24" maxlength="30" placeholder="First name"  onchange=validate(1)" /> 
      <input type="text" name="initial" size="4" maxlength="4" placeholder="Initial" /> 
      <input type="text" id="input_required" name="lastname" size="24" maxlength="40" placeholder="Last Name" onchange=validate(2)"  />
      </td></tr>
    <tr><td><input type="text" name="firm" size="80" maxlength="254" placeholder="Firm or Business" onchange=validate(3)" /></td>    </tr>
    <tr><td><input type="text" name="address" size="80" maxlength="254" placeholder="Street Address" onchange=validate(4)"  /></td>    </tr>
    <tr>
      <td><input type="text" name="city" size="28" maxlength="30" placeholder="City" onchange=validate(5)"  /> 
      <input type="text" id="input_required" name="state" size="4" maxlength="2" placeholder="State" onchange=validate(6)"  />  
      <input type="text" name="zip" size="8" maxlength="8" placeholder="Zip Code" onchange=validate(7)"  /></td>
    </tr>
    <tr>
      <td><input type="text" id="input_required" name="phone" size="35" maxlength="254" placeholder="Telephone" onchange=validate(8)"  /> 
      <input type="text" name="fax" size="35" maxlength="254" placeholder="Fax" onchange=validate(9)"  /></td>
    </tr>
    <tr>
      <td><input type="text" name="cell" size="35" maxlength="254" placeholder="Cell" onchange=validate(10)"  /> 
      <input type="text" id="input_required" name="email" size="35" maxlength="254" placeholder="E-mail" onchange=validate(11)"  /></td>
    </tr>
    <tr>
      <td><input type="text" name="website" size="80" maxlength="254" placeholder="Website" onchange=validate(12)"  /></td>
    </tr>
  </table>
  <h3>EDUCATION</h3>
  <table width="100%">
    <tr>
      <td><input type="text" name="university" size="80" maxlength="254" placeholder="College or University" onchange=validate(12)"  /> 
      <input type="text" name="degree" size="28" maxlength="254" placeholder="Degree Received" onchange=validate(13)"  /> 
      <input type="text" name="degreeyr" size="4" maxlength="4" placeholder="Year" onchange=validate(14)"  /></td>
    </tr>
    <tr>
      <td><input type="text" name="jurisdiction" size="80" maxlength="254" placeholder="Jurisdiction where admitted to practice" onchange=validate(15)" /> 
      <input type="text" name="jurisdictionyr" size="4" maxlength="4" placeholder="Year" onchange=validate(16)" />
    </tr>
  </table>          
  <input type="submit" value="Submit" name="submit"> 
  <input id="button" name="Reset" type="reset" value="Reset">
  <?php
    include "csv.php";
  ?>
  </form>

<script type="text/javascript">//<![CDATA[
function validate(id){
var txt = document.getElementById(id).value;
if(id == 1){

}
else if (id == 2){

}


//]]>
</script></body></html>

<div id="msg"></div>
<script type="text/javascript">//<![CDATA[
var id;
var msg = document.getElementById('msg');
function validate(n){
id = n;
var txt = document.getElementById(id).value;
    xmlhttp=null;
    var Url="validate.php"
  if (window.XMLHttpRequest){ 
    xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (xmlhttp!=null){
    xmlhttp.onreadystatechange=getResult;
    xmlhttp.open("POST", Url, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    var post = 'id=' + id + '&txt=' + txt;
    xmlhttp.send(post);
  }else{
    alert("UNEXPECTED ERROR: XMLHttpRequest not supported");
  }
};

function  getResult(){
  var retVals = '';
  if (xmlhttp.readyState==4){
    if (xmlhttp.status==200){
      var retVal=xmlhttp.responseText;

      msg.innerHTML = retVal;

    }
    else{
      alert("UNEXPECTED AJAX ERROR: : " + xmlhttp.statusText + "HTTP Status: " + xmlhttp.status);
    }
  }
};

//]]>
</script></body></html>

<?php
header('Content-Type:text/plain');
$id = $_POST['id'];
$txt = $_POST['txt'];

// do validation

echo "<p>This is the response</p>";
?>

<input type="text" id="input_required" name="firstname" size="24"
maxlength="30" placeholder="First name" value="<?php echo $_POST["firstname"]; ?>">