时间戳

首页 > 解决方案 > 在错误处理期间重新显示不需要的字段

javascript - 在错误处理期间重新显示不需要的字段

问题描述

我已经做到了，所以我有 1 个表单，其中包括一个隐藏的 div，其中包含在单击“添加更多”按钮时显示的额外输入字段。当表单使用无效数据提交时，报价表单会重新显示，其中包含有效数据以及无效数据的错误消息。

问题是，当您第一次进入页面时显示的原始 3 个字段在错误处理时重新显示在报价单上方。

当报价单重新显示错误时，有没有办法隐藏这 3 个字段？

// Error checking. If there are errors, call the redisplayForm function to redisplay the Quote Form Handler.
if ($errorCount>0 || $errorCount<0) {
    redisplayForm($bizName, $bizType, $address1, $address2, $city, 
    $state, $zip, $sqft, $cName, $email, $bizNameErr, $bizTypeErr,
    $address1Err, $cityErr, $stateErr, $zipErr, $sqftErr, $cNameErr, $emailErr );

    $bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
    = $zipErr = $sqftErr = $cNameErr = $emailErr = "";

    $bizName = $bizType = $address1 = $address2 = $city = $state
    = $zip = $sqft = $cName = $email = "";
// If there are no errors, an email will be sent to Conversion Worx with the user's input.
} else {
    $To = "myemail"; 
    $Subject = "Quote Form Results";
    $Message = "Business Name: " . $bizName . "\n" 
    . "Business Type: " . $bizType . "\n"
    . "Address Line 1: " . $address1 . "\n"
    . "Address Line 2: " . $address2 . "\n"
    . "City: " . $city . "\n"
    . "State: " . $state . "\n"
    . "Zip Code: " . $zip . "\n"
    . "Estimated Square Feet: " . $sqft . "\n"
    . "Contact Name: " . $cName . "\n"
    . "Email Address: " . $email;
    $result = mail($To, $Subject, $Message);
}
// If email to Conversion Worx is sent succesfully, send thank you email to user.
if (isset($result)) {
    $To = $email;
    $Subject = "Virtual Tour Quote Request";
    $Headers = 'From: myemail' . "\r\n" . 
        'Reply-To: myemail' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    $Message = $cName . ",";
    $Message .= "\n" . "\n" . "Thank you for your interest in our 3D 360° Virtual Tours!";
    $Message .= "\n" . "\n" . "Your information has been submitted. ";
    $Message .= "A Conversion Worx represenative will be contacting you shortly to arrange a quote via phone or on-site visit.";
    $Message .= "\n" . "\n" . "We look forward to working with you! ";
    $Message .= "\n" . "\n" . "\n" . "Sincerely,";
    $Message .= "\n" . "\n" . "The Conversion Worx Team";
    $result = mail($To, $Subject, $Message, $Headers);
}
 ?>

<?php

$errorCount = "";

$bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
= $zipErr = $sqftErr = $cNameErr = $emailErr = "";

$bizName = $bizType = $address1 = $address2 = $city = $state
= $zip = $sqft = $cName = $email = "";
// Check to make sure the required fields from the Quote Form are not empty
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["bizName"])) {
    $bizNameErr = "Business name is required";
    ++$errorCount;
  } else {
    $bizName = test_input($_POST["bizName"]);
  } 
  if (empty($_POST["cName"])) {
    $cNameErr = "Contact Name is required";
    ++$errorCount;
  } else {
    $cName = test_input($_POST["cName"]);
  }
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
    ++$errorCount;
  } else {
    $email = test_input($_POST["email"]);
  }
  if (empty($_POST["bizType"])) {
    $bizTypeErr = "Business Type is required";
    ++$errorCount;
  } else {
    $bizType = test_input($_POST["bizType"]);
  }
  if (empty($_POST["address1"])) {
    $address1Err = "Address Line 1 is required";
    ++$errorCount;
  } else {
    $address1 = test_input($_POST["address1"]);
  }
   if (!empty($_POST["address2"])) {
    $address2 = test_input($_POST["address2"]);
  }
  if (empty($_POST["city"])) {
    $cityErr = "City is required";
    ++$errorCount;
  } else {
    $city = test_input($_POST["city"]);
  }
  if (empty($_POST["state"])) {
    $stateErr = "State is required";
    ++$errorCount;
  } else {
    $state = test_input($_POST["state"]);
  }
  if (empty($_POST["zip"])) {
    $zipErr = "Zip Code is required";
    ++$errorCount;
  } else {
    $zip = test_input($_POST["zip"]);
  }
  if (empty($_POST["sqft"])) {
    $sqftErr = "Square Feet is required";
    ++$errorCount;
  } else {
    $sqft = test_input($_POST["sqft"]);
  }   
}
// Form validation
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

标签： javascriptphphtmlcssajax

解决方案

您有两种选择：在浏览器中（通过 javascript/jQuery）或在服务器（PHP）中进行验证。

如果您选择 PHP 路由，页面将更改或刷新，输入到字段中的任何数据都将丢失，除非您采取特定步骤来存储/检索/替换它。

javascript/jQuery 路由：

如果您选择 javascript 路由，您可以中断表单提交过程并处理大部分（如果不是全部）表单字段验证。如果任何字段验证失败，您不仅可以将所有数据仍在原位的情况下返回给用户，还可以将他们的注意力引导到错误上（例如，通过向错过的字段添加一个类来绘制注意，或通过弹出模式对话框消息，或将光标聚焦在错过的字段上等）

PHP路线：

如果选择 PHP 路由，如何保存/恢复用户数据？大量的体力劳动......您可以：

1)使用一点 javascript将字段值存储到localStorage中。它需要您进行大量编码，但它确实有效。同样，您将在提交表单之前中断表单提交过程并存储数据。

2) 在 PHP 中，接收所有字段值。如果任何字段验证失败，您可以将用户（通过 PHP指令？）连同所有用户数据一起headers发送回同一页面或另一个页面。这意味着要么创建一个新页面，要么将 PHP 代码添加到现有页面，以查找发布的这些值，如果找到它们，则以这样的方式构建页面，即显示已填写这些值的表单. 这种方法比第一种方法需要更多的工作。

坦率地说，完成您想要的最简单的方法是使用基于 javascript 的客户端字段验证——这就是 99% 的网站处理这种情况的方式。优点远远大于任何缺点。如果您担心超级用户使用 F12 DevTools 来欺骗您的字段验证，那么您可以在 PHP 中进行备份检查，无需费心保留表单数据（为他们服务......！）。属于黑客类别的人数如此之少，以至于你真的不需要迎合他们——但你确实需要在 PHP 方面仔细检查，只是不要担心保存他们的数据。在 javascript 端处理这个问题

请参阅这些资源：

如何将用户直接引导至表单

推荐阅读