How to Refine Your Web Form Validation

After you've checked your required fields and provided feedback to the user, you need to refine the validation of your web form. Prior to doing so, you should pause and look at the code you've added for validation.

The submit event handler is set up through jQuery's submit() function:

    $("#userForm").submit(function(e) {
        removeFeedback();
        var errors = validateForm();
        if (errors == "") {
            return true;
        } else {        
            provideFeedback(errors);
            e.preventDefault();
            return false;
        }
    });

Within the submit() function, the first thing that happens is any feedback is removed. Next, the validateForm() function is called and anything that comes back from that function is set into the errors variable.

If the errors variable is empty, then the submit() function returns Boolean true, which essentially tells the browser, "Everything's okay; go ahead and submit the form." However, if errors are encountered, the provideFeedback() function is called and the default actions (to submit the form) are stopped, thanks to the preventDefault and return false statements.

The validateForm() function is the heart of the validation logic for the form.

    function validateForm() {
        var errorFields = new Array();
 
        //Check required fields have something in them
        if ($('#name').val() == "") {
            errorFields.push('name');
        }
        if ($('#email').val() == "") {
            errorFields.push('email');
        }
        if ($('#password1').val() == "") {
            errorFields.push('password1');
        }
 
        return errorFields;
    } //end function validateForm

In this function, an array is instantiated to hold the error fields. This enables you to store more than one error instead of a single error at a time (which would be frustrating to the user).

Each required field is retrieved using its ID. If the value of that field is "", then the ID of the field with the error is pushed onto the errorFields array. Finally, the errorFields array is returned and becomes the error array that you see in the submit() handler.

Another way to accomplish this task would be to add a class to each element that's required and then loop through each of the required classes with jQuery, like $('.required').each(.

With that validation, you can look at the provideFeedback() function:

function provideFeedback(incomingErrors) {
    for (var i = 0; i < incomingErrors.length; i++) {
        $("#" + incomingErrors[i]).addClass("errorClass");
        $("#" + incomingErrors[i] "Error").removeClass("errorFeedback");
    }
    $("#errorDiv").html("Errors encountered");
 
 }

The provideFeedback() function loops through the incoming errors and adds the errorClass class to the fields. Recall from the CSS that this class simply sets the background color to a shade of red. Next, the errorFeedback class is removed. This class hides the textual feedback, so by removing the class, the feedback becomes visible to the user. Finally, outside of the loop, the errorDiv's HTML is set to the phrase "Errors encountered".

The final piece of the form.js file is the removeFeedback() function:

    function removeFeedback() {
        $("#errorDiv").html("");
        $('input').each(function() {
            $(this).removeClass("errorClass");
        });
        $('.errorSpan').each(function() {
            $(this).addClass("errorFeedback");
        });
    }

This function first sets the errorDiv's HTML to blank. Next, each input has its errorClass removed and each errorSpan on the page has its errorFeedback class added, which essentially hides them from visibility. All of this is done with the help of jQuery selectors and functions.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com