Slightly red faced, I shall now explain my problem and give a solution for those who come across the same thing.

The Blog4Umbraco uses a jquery validation plugin. More information can be found about the plugin here:
http://docs.jquery.com/Plugins/Validation - I spent a few hours looking through this last night and it is applicable to any application and is well worth looking into.

So to my problem. How to apply custom styling to my form, specifically create a validation summary <div> area and remove the error messages from the form inputs themselves.

By default, the jquery validator plugin will look for form elements that have a style selector of "required"; please see the example below:

<input type="text" id="author" name="name" class="required" /> - this will cause the control to be validated

<input type="text" id="author" name="name" class="mytextinput" /> - this will not get validated

So moving on to the actual jquery validation script itself. By default the Blog4Umbraco includes the following script:

<script type="text/javascript">
    jQuery(document).ready(function(){

 jQuery("form").validate({

 submitHandler: function(form) {
  jQuery("#commentform").hide();
    jQuery("#commentLoading").show();
    jQuery("#commentform #submit").attr("enabled", false);
    var url = "/base/Blog4Umbraco/CreateComment/<umbraco:Item field="pageID" runat="server"/>.aspx";
    jQuery.post(url, { author: jQuery("#commentform #author").val(), email: jQuery("#commentform #email").val(), url: jQuery("#commentform #url").val(), comment: jQuery("#commentform #comment").val() },
        function(data){
      jQuery("#commentLoading").hide();
                jQuery("#commentPosted").show().removeClass("error");

                if(data == 0){
                  jQuery("#commentPosted").addClass("error").html(" <%= Umlaut.Umb.Blog.BlogLibrary.Dictionary("#CommentFailend","Your comment could not be posted, we're very sorry for the inconvenience") %> ");
                        jQuery("#commentform").show();
                        jQuery("#commentform #submit").attr("enabled", true);
                }
            });
    }
    });
    });
</script>

Ok, so the important but is the jQuery("form").validate( With the code above, if the form validates then the submit handler function is called - so how do you customise this validation?

The jquery validator plugin has a veritable multitude of options you can specify which basically makes it usable in any situation. Below I have added in some additional code which is fired during the validation process. If the validation requirements specified in the new code below are met, then jquery moves on to the submitHandler or else it stops.

<script type="text/javascript">
    jQuery(document).ready(function(){


          jQuery("#commentform #email").blur(function(){
                var email = jQuery("#commentform #email").val();

                if(email != ""){
                    var url = "/base/Blog4Umbraco/GetGravatarImage/" + email + "/80.aspx";
                    jQuery.get(url, function(data){
                        if(data != ""){
                             jQuery("#gravatar").css( "background-image","url(" + data + ")" ).show();
                        }else{
                            jQuery("#gravatar").hide();
                        }
                    });
                }
          });

          jQuery("form").validate({
          //SET UP A CONTAINER DIV TO HOLD THE RESULTS
      //ie. Your form html will need to contain <div id="container"><ul></ul></div>
    errorLabelContainer: $("ul", $('div.error-container')),
      //Wrap each of the errors into an li element before its added to the error div
          wrapper: 'li',
      //Set up a rule, in this case, an input called "comment" must have at least 2 characters
          rules: {             
          comment: { 
            required: true, 
            minLength: 2, 

        } 
    }, 
    messages: { 
    //Set up a message for the input called "comment"
        comment: { 
            required: "Please enter a username", 
            minLength: "Your username must consist of at least 2 characters", 

        } 
    },


            submitHandler: function(form) {
                jQuery("#commentform").hide();
                jQuery("#commentLoading").show();
                jQuery("#commentform #submit").attr("enabled", false);
                var url = "/base/Blog4Umbraco/CreateComment/<umbraco:Item field="pageID" runat="server"/>.aspx";
                jQuery.post(url, { author: jQuery("#commentform #author").val(), email: jQuery("#commentform #email").val(), url: jQuery("#commentform #url").val(), comment: jQuery("#commentform #comment").val() },
                   function(data){

                   jQuery("#commentLoading").hide();
                   jQuery("#commentPosted").show().removeClass("error");

                    if(data == 0){
                          jQuery("#commentPosted").addClass("error").html(" <%= Umlaut.Umb.Blog.BlogLibrary.Dictionary("#CommentFailend","Your comment could not be posted, we're very sorry for the inconvenience") %> ");
                          jQuery("#commentform").show();
                          jQuery("#commentform #submit").attr("enabled", true);
                    }

                   });
            }
            });
    });
</script>

The example above is very simple but hopefully enough to show you the principle. If you want to add more validation, simply add more rules and comments.

is working on a reply...