Validating dynamic number of form elements in PHP

Question

I need to make a form where client information can be added by people at the administration department. On the first form page, information like client name, address and contact details can be entered, as well as whether or not the client has children.

The form gets validated by PHP. If the client does not have children, the data is saved to the database. If the client does have children, the form data gets saved in hidden form fields, and a second form page is shown, where up to 10 children and can be added.

However, on initial page view, only one text input is visible. With a javascript button, more text input fields can dynamically be added (until the limit of 10 is reached).

The problem is the validation in PHP. If one of the text inputs contains a non-valid string, the form should be re-displayed with the right number of fields, and those containing errors in a special HTML class (in the CSS i give that class a red border for usability reasons, so the user can immediately see where the error resides). However, because the adding of fields happens with Javascript, the form gets re-displayed with only one field.

Any ideas on how to address this problem are very welcome. I'm proficient in PHP, but JavaScript is very new to me, so I'm not able to make big changes to the script i found to dynamically add fields.

Answer 1

I've dealt with something similar in the past. There are a couple of options that come to mind.

Since you have JS code to generate new fields at the click of the button, why not expand that JS function so it can also be called with some parameters passed. If there are parameters, it will populate the fields with existing data.

Then, if the form is being re-displayed due to errors, or for editing, from PHP, pass some information to Javascript so that when the page loads, you create the fields and populate them with data.

To illustrate, I assume you have something like this:

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

And you have the function:

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

Change it so it is like this:

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';
    }
}

And from PHP, add some code that runs 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>

Hope that helps, its a high level example without knowing exactly how your form works but I've used similar methods in the past to re-populate JS created fields with data from the server side.

EDIT: Another method you could use would be to create the HTML elements on the PHP side and pre-populate them from there, but that could end up with duplicate code, HTML generation from JS and HTML generation of the same stuff from PHP. As long as the JS side was smart enough to recognize the initial fields added by PHP you can go with whatever is easiest to implement. Personally I'd just extend your JS code to handle optional data like illustrated above.