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

时间:2012-07-26 22:38:35

标签: php javascript forms

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

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

但是,在初始页面视图中,只能看到一个文本输入。使用javascript按钮,可以动态添加更多文本输入字段(直到达到10的限制)。

问题是PHP中的验证。如果其中一个文本输入包含无效字符串,则应使用正确数量的字段重新显示表单,并在特殊HTML类中包含错误的字段(在CSS中,出于可用性原因,我会为该类提供红色边框,因此用户可以立即看到错误所在的位置)。但是,因为使用Javascript添加字段,所以只使用一个字段重新显示表单。

非常欢迎任何关于如何解决这个问题的想法。我精通PHP,但JavaScript对我来说很新,所以我无法对我发现的动态添加字段的脚本进行大的修改。

1 个答案:

答案 0 :(得分:0)

我过去曾经处理过类似的事情。我想到了几个选项。

由于你有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生成和来自同一事物的HTML生成PHP。只要JS方面足够聪明地识别PHP添加的初始字段,您就可以使用最容易实现的任何内容。就个人而言,我只是扩展你的JS代码来处理上面所示的可选数据。