How to Create a User Database for a Members-Only Website
How to Validate Numbers in Web Form Fields
Ruby on Rails Keywords

How to Provide Feedback to Web Form Users

The general pattern for the feedback on a web form will be to highlight the field that needs attention and activate messaging for the individual field and the overall form.

To facilitate providing feedback, create two new functions in form.js.

  1. Open form.js in your editor, if it isn't already open.

  2. Within form.js, add the following functions, after the validateForm 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");
        }
     
        function removeFeedback() {
            $("#errorDiv").html("");
            $('input').each(function() {
                $(this).removeClass("errorClass");
            });
            $('.errorSpan').each(function() {
                $(this).addClass("errorFeedback");
            });
        }
  3. With those functions in the file, you next need to call them.

    The call to the removeFeedback function is added right away within the submit handler so that error feedback is cleared when the form is submitted. That call looks like this:

    removeFeedback();

    The provideFeedback function needs to be added within the else condition in the form's submit handler and looks like this:

    provideFeedback(errors);

    The submit handler should now look like this:

       $("#userForm").submit(function(e) {
            removeFeedback();
            var errors = validateForm();
            if (errors == "") {
                return true;
            } else {
                provideFeedback(errors);
                e.preventDefault();
                return false;
            }
        });
  4. Save the file (as form.js) within your document root.

    At this point, the entire file should consist of this:

    $(document).ready(function() {
        $("#userForm").submit(function(e) {
            removeFeedback();
            var errors = validateForm();
            if (errors == "") {
                return true;
            } else {        
                provideFeedback(errors);
                e.preventDefault();
                return false;
            }
        });
     
        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
     
        function provideFeedback(incomingErrors) {
            for (var i = 0; i < incomingErrors.length; i++) {
               $("#" + incomingErrors[i]).addClass("errorClass");
               $("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");
            }  
             $("#errorDiv").html("Errors encountered");
     
        }
        function removeFeedback() {
            $("#errorDiv").html("");
            $('input').each(function() {
                $(this).removeClass("errorClass");
            });
            $('.errorSpan').each(function() {
                $(this).addClass("errorFeedback");
            });
        }
     
    });
  5. Reload form.php in your browser.

  6. Clear any information from the fields, if any was saved by your browser.

  7. Within empty fields in the form, click Submit Query.

    image0.jpg
  8. Fill in the Name field and click Submit Query.

    The feedback indicating there was an error in the Name field should clear, but the others will remain.

    image1.jpg
  9. Fill in details within the E-mail Address and Password fields and click Submit Query.

    The form should submit, again giving a Page Not Found or similar error.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Designing the User Interface (and More Layers) in ASP.NET
How to Return Web Service Data from a Database
How to Perform Basic JavaScript Validation
How to Validate Web Forms
Exploring Database Design Tips
Advertisement

Inside Dummies.com