jquery validate: How to show and hide error summary?

Question

I have implemented an error summary according to this example here:

while I get it to display, I don't have a clue how to hide it once there are no errors remaining.

I have fiddle here to demonstrate it:

type in anything in either of the two fields, while the error messages go away, the summary still remains. There must be an event that I need to subscribe to, but I can't figure it out.

$(document).ready(function () {

  var validator = validation_rules('#myform');
  validator.form();

  function validation_rules(form) {

    $.validator.addClassRules("fillone", {
      require_from_group: [1, ".fillone"]
    });

    var validator = $(form).validate({
      errorPlacement: function (error, element) {
        var field_error = $(form).find('#id_' + element.attr('name')).siblings('.field_error');
        if (field_error.length > 0) {
          error.appendTo(field_error);
        }

        $(field_error).show();
      },
      invalidHandler: function () {
        $("#validation_summary").text(validator.numberOfInvalids() + " field(s) are invalid");
      }

    });
    return validator;
  }

});

Answer 1

use the errorContainer option. This will show/hide the specified elements when the form becomes valid/invalid

errorContainer:{"#validation_summary"}

example is on http://jsfiddle.net/eDk2m/7

edit after reading comment

there is an event to hook into - a good example is in the custom-methods-demo.html page of the plugin demos. It looks like this

var validator = $("form").bind("invalid-form.validate",  
function() { 
 var errorCount = validator.numberOfInvalids(); 
 // do other stuff here
}).validate({...});