Really Simple Validation (RSV) Demos - Prototype Extension
Demos
1. A simple example
2. A second example
3. All validation rules
4. Display type: alert-one
5. Display type: display-html
6. Custom validation rule
7. Custom error handler

<< Main page

#7: Custom Error Handler

This example highlights the use of a custom error handler. As we've seen in the previous examples, the script can display the errors in one of three ways: alerting them one by one, alerting them all at a time or displaying the result in the webpage. But sometimes you need a little more control.

This demo bypasses that built-in functionality and passes the error results to a custom function by using the rsv.customErrorHandler configuration setting and defining our own function: myCustomErrorDisplayFunction. It displays each errors next to the appropriate field, and turns the field label red. See the code below (or view source on the page) to see how it's done. Note that this is really just one illustration: since the script allows you to send the error results to a custom function, you can handle / display the errors in - quite literally - any way you want.

First Name:
Last Name:
Email:
Your age:
Marital Status:

Event.observe(window, "load", function() {
        new RSV({
          formID: "demo_form7",
          customErrorHandler: myCustomErrorDisplayFunction,
          rules: myRules
        });
});

var myRules = [
                  "required,first_name,Please enter your first name.",
                        "required,last_name,Please enter your last name.",
                        "required,email,Please enter your email address.",
                        "valid_email,email,Please enter a valid email address.",
                        "required,any_integer,Please enter your age.",
                        "digits_only,any_integer,The age field may only contain digits.",
                        "required,marital_status,Please enter your marital status."
          ];

/**
 * My custom error message handler. This displays each error message next to
 * each field. Your custom error handler MUST take 2 parameters, like this one.
 * The first is the reference to the form element, the second is an array of arrays;
 * each main array index is an array with 2 elements: [0] the offending field element,
 * [1] the error message.
 */
function myCustomErrorDisplayFunction(f, errorInfo)
{
        // disabled all errors by default
        for (var i=0; i<myRules.length; i++)
        {
          var parts = myRules[i].split(",");
          var fieldName = parts[1];

          document.getElementById(fieldName + "_label").style.color = "#000000";
                document.getElementById(fieldName + "_error").style.display = "none";
        }

        for (var i=0; i<errorInfo.length; i++)
        {
          var fieldName;

                // radio button
    if (errorInfo[i][0].type == undefined)
                  fieldName = errorInfo[i][0][0].name;
          else
                  fieldName = errorInfo[i][0].name;

                // display the error
          document.getElementById(fieldName + "_label").style.color = "#cc0000";
                document.getElementById(fieldName + "_error").style.display = "block";
                document.getElementById(fieldName + "_error").innerHTML = errorInfo[i][1];
        }


        // normally, we'd do something like this: only return TRUE if there were no errors.
        // but this is just a demo. so it's commented out.
        //return (errorInfo.length == 0) ? true : false;

        if (errorInfo.length == 0)
          alert("Form submitted here!");

        return false;
}