php - 验证 PHP 中表单元素的动态数量

Question

我需要制作一个表格，管理部门的人员可以在其中添加客户信息。在第一个表格页面上，可以输入客户姓名、地址和联系方式等信息，以及客户是否有 child 。

表单由 PHP 验证。如果客户端没有 child ，数据将保存到数据库中。如果客户端确实有子项，则表单数据将保存在隐藏表单字段中，并显示第二个表单页面，其中最多可以添加 10 个子项。

但是，在初始页面 View 中，只有一个文本输入可见。使用 JavaScript 按钮，可以动态添加更多文本输入字段(直到达到 10 个限制)。

问题是 PHP 中的验证。如果文本输入之一包含无效字符串，则应使用正确数量的字段以及特殊 HTML 类中包含错误的字段重新显示表单(出于可用性原因，我在 CSS 中为该类赋予了红色边框) ，这样用户就可以立即看到错误所在)。但是，由于添加字段是通过 Javascript 进行的，因此重新显示的表单仅包含一个字段。

非常欢迎任何有关如何解决此问题的想法。我精通 PHP，但 JavaScript 对我来说非常陌生，因此我无法对我发现的动态添加字段的脚本进行重大更改。

Answer 1

我以前也处理过类似的事情。我想到了几个选项。

既然您有 JS 代码可以在单击按钮时生成新字段，为什么不扩展该 JS 函数，以便也可以通过传递一些参数来调用它。如果有参数，它将用现有数据填充字段。

然后，如果由于错误或编辑而从 PHP 重新显示表单，请将一些信息传递给 Javascript，以便在页面加载时创建字段并用数据填充它们。

为了说明这一点，我假设您有这样的东西:

<a href="#" onclick="addNewFormField(); return false">Add Another Child</a>

你有这个功能:

function addNewFormField() {
    // create new HTML element to contain the field
    // create new input, append to element container
    // add container to DOM
}

将其更改为如下所示:

function addNewFormField(data) {
    // create new HTML element to contain the field
    // create new input, append to element container
    // add container to DOM

    if (data != undefined) {
        newFormElement.value = data.value;
        newContainerElement.class = 'error';
    }
}

并在 PHP 中添加一些运行 onload 的代码:

<script type="text/javascript">
window.onload = function() {  // replace me with jQuery ready() or something proper
    <?php foreach($childInList as $child): ?>
        addNewFormField({ value: '<?php echo $child['name'] ?>' });
    <?php endforeach; ?>
}
</script>

希望有所帮助，它是一个高级示例，不知道您的表单是如何工作的，但我过去使用过类似的方法用来自服务器端的数据重新填充 JS 创建的字段。

编辑:您可以使用的另一种方法是在 PHP 端创建 HTML 元素并从那里预先填充它们，但这可能会导致重复代码、从 JS 生成 HTML 以及从 JS 生成相同内容的 HTML PHP。只要 JS 端足够聪明，能够识别 PHP 添加的初始字段，您就可以采用最容易实现的方式。就我个人而言，我只是扩展 JS 代码来处理可选数据，如上所示。