AJAX Form, with php validation through JSON response

Question

I have a form with required fields which check via PHP. Which generates response in JSON and delivers it via ajax response, in following form Object {first_name: true, e_mail: false, phone_number: true, themessage: true}

the input fields in the form have the ID which is equal to key of object array.

What I am trying to achieve is to loop through this object array, determine which of the fields is missing and add error message here is how I am doing it.

                if (fields_list) {
                console.log(fields_list);
                for (var key in fields_list) {
                    var item = fields_list[key];
                    if (item === true) {
                        $('#' + key).after('<div class=' + key + '>' + data.field_msg + '</div>');
                    } else {
                        $("div" + '#' + key).remove();
                    };
                }; // Loop through fields_list
            }; // if field list exist

When doing first form submision it gives me the result which I expect, it adds the div container with error message and with id of the input field after the input field itself. The problem ocurs after second submit if data has been entered into the field, I want that div container after input field to be removed. Instead it keeps appending the div container after field which still submitted without data but doesn't append additional div container to field that has data. How to fix this problem?

Thank you in advance.

Answer 1

Have you considered having 1 errors div at the top / bottom of your form? That's what we use here for our projects. If you're interested in trying it, you don't have to append a div each time but instead have a div with class "errors" or something be there already, but hidden with CSS. When you get a response, add a flag "errors" in your JSON so that you know wether or not there were errors, and show that div if there were. Then you can add a simple list of the errors with ul's and li's in that div, and clear it each time you submit so you can generate a new list in there if needed a second time.

Answer 2

the message divs don't have an id. Because of that, your second selector does not match.

the easiest solution if you want to stay close to your existing code is to give those divs an id, too. For example:

for (var key in fields_list) {
   $('#message' + key).remove(); //clear old messages
   var item = fields_list[key];
   if (item === true) {
       // add message div with unique id
       $('#' + key).after('<div class=' + key + ' id="message' + key + '">' + data.field_msg + '</div>');
    }
}; // Loop through fields_list

Answer 3

if (fields_list) {
    for (var key in fields_list) {
        var item = fields_list[key];
        $("div" + '#' + key).remove(); // clear old messages
        if (item === true) {
            $('#' + key).after('<div id=' + key + '>' + data.field_msg + '</div>');
        } else {
            $("div" + '#' + key).remove();
        };
    }; // Loop through fields_list
}; // if field list exist

cypherabe you really helped.