Here is a bit of JS/jQuery code that basically goes through and 'picks up' on any fields that are marked with HTML5 attribute 'required' or 'pattern.' It then adds an 'error' class to call attention to it for the user, etc.
$('[required], [pattern').each(function () { // if field is required, we must add .has-error when $(document).ready. We must also add a focus listener to test the pattern and replace .has-error with .has-success, as needed.
if (($(this).attr('required') !== false) && ($(this).val() === "")) {
var formGroup;
formGroup = $(this).closest('.form-group');
formGroup.addClass('has-error'); // .has-error must be added to a .form-group. Use closest() to traverse up DOM starting with $(this) and find the parent .form-group.
$(this).focus(function () { /* .has-error now has focus listener. On focus/blur, we will be testing for an opportunity to have validData, and, subsequently add .has-success */
// We don't want to confuse the user while they are in the field, so let's remove .has-error/.has-success
formGroup.removeClass('has-error'); // upon focus, immediately remove .has-error
formGroup.removeClass('has-success'); // upon focus, immediately remove .has-success
}); // end focus
$(this).blur(function () { // on blur, check for '' val.
if ($(this).val() === "") { // if val() is '', bring back .has-error.
formGroup.addClass('has-error');
// Otherwise, if there is a value, we'll need to check for a pattern.
} else if (!$(this).attr('pattern')) { /* If there is no pattern (we have already established that a value is present), no further testing is required. Go ahead with .has-success. */
formGroup.addClass('has-success');
} else { // If we have made it here, val is not blank, and we have a pattern to go with it.
/* Sometimes a 'general' use fxn. like this might be better served as a fxn. in plugins.js. However, this regExp testing is only used here. Should this change, we can 'externalize' this algorithm */
var regExp = new RegExp($(this).attr('pattern')); // pull the regexp from fg's pattern attrib.
/* Unfortunately, it seems that test() only check to see if the pattern is found, and doesn't account for whether or not there are extraneous characters that shouldn't be there. */
if (regExp.test($(this).val())) { // if match is good, add .has-success {
formGroup.addClass('has-success');
} else { // Pattern doesn't match!
formGroup.addClass('has-error');
} // if-else
} // end if-else if-else
}); // end blur
// if validData = true, add .has-success (and vice-versa).
} // end if
}); // end each
This brings me to the brunt of my PHP question. In most of the examples I have seen for PHP server-side validation, the PHP code is just using a series of if-else statements to 'parse' the form 1 ID at a time, and doing its validation, be it regexp, just required or whatever.
This seems a bit inefficient. It seems that, akin to JS/jQuery, we should be able to build an array of the 'required/pattern' form fields, or otherwise loop through them and then use 'general' messages or string variables to generate error messages to send back to the user.
In other words, instead of doing:
if(trim($name)=="") {
$error = "Your name is required.";
} elseif(trim($email)=="") {
$error = "Your e-mail address is required.";
} elseif(!isEmail($email)) {
$error = "You have entered an invalid e-mail address.";
We should just loop through anything marked 'required' (HTML5) and spit back something like: "The " + #ID + " field is required."
Similarly, we should be able to loop through anything with a 'pattern' attribute, extract the regexp have PHP validate it, and then, utilizing the 'title' (HTML5) attribute, send something back like: "The " + #ID + " field " + .
How can one 'clean up' the PHP code by avoiding multiple if-else statements, and instead taking advantage of HTML5 attributes, for loops, to perform its validation(s)?