Error Handling Script Not Outputting Errors to User

JavaScript
1

Hello all,

Looks like there is a conflict between the PHP script and JS. JS is expecting an array of errors from the PHP script, but the PHP is set up to only return one error at a time. Logically, it should only return one error at a time to the user as it will not overload the page content.

the pages this form appears on

After the user fills out the second form to confirm their e-mail along with a few other surface details, it should return one error at a time to be populated into #errormessage ul until the submission is a valid one. Currently, if there is an error, it displays the error message text, only without any actual errors as a list item.

lpemailbox.js (lines 47-57)


			var fragment = document.createDocumentFragment();
			$.each(data['errors'], function (i, e) {
				var item = document.createElement('li');
				if (typeof item.textContent === "string") {
					item.textContent = e;
				} else {
					item.innerText = e;
				}
				fragment.appendChild(item);
			});
			$("#errormessage ul").empty().append(fragment.childNodes);

confirmform.php (lines 23-50)


			if ($origEmail != $confirmEmail || empty($confirmEmail)) {
				$response['errors'][] = 'E-mail addresses don\\'t match.';
				$status = 0;
			}
			if (empty($name) || preg_match('/[^A-Za-z ]/', $name)) {
				$response['errors'][] = 'No name entered (name can only have letters).';
				$status = 0;
			}
			if (!ctype_digit($age)) {
				$response['errors'][] = 'Age must be numeric.';
				$status = 0;
			}
			if ($country == "Select Location") {
				$response['errors'][] = 'No location selected.';
				$status = 0;
			}
			if ($mathAnswer != $rightAnswer) {
				$response['errors'][] = 'Math answer incorrect.';
				$status = 0;
			}
			if (!empty($catcher)){
				$response['errors'][] = 'Bot submission.';
				$status = 0;
			}
			if ($submissionTime < 9000){
				$response['errors'][] = 'Form submitted too quickly.';
				$status = 0;
			}

Any ideas or suggestions?

Thanks,

Tyler

edit: Kudos to fretburner for helping to construct the original script.

2

Hi Tyler, how’s it going?

If you check the response from the server (eg. in Chrome’s dev console), the server actually returns all error messages as a JSON array.

Yeah I seem to remember having an issue with multiple error messages being returned, but I don’t remember what we did about it in the end.

To be honest, I think it’s better from a usability standpoint to display all the errors at once, as forcing users to keep resubmitting a form only to be met with a different error could be pretty frustrating and might cause them to give up (although having said that, with such a simple form it’s unlikely anyone would make more than a couple of errors).

It looks as though you removed the <ul></ul> element from within div#errormessage, which is why the returned errors aren’t being displayed.

3

Oi! ¿Voce fala portugues?

Yes, that is the issue. I looked in the HTML for something like that. Maybe I thought that if the <ul> wasn’t there, JS would create one.

Thanks fretburner, and rock on!

With this simple form and without a page refresh (if this was coded all in PHP), it only makes sense to have one error returned at a time. If the user can’t handle that, I can’t imagine they would be such a great addition to my mailing list.