I need to add a functionality, where invalid and valid elements are highlighted,
and once all required fields are valid, another function is called to take the user to the next phase. Without a submit button.

Problem is, I'm not yet comfortable enough with the jQuery syntax enough to rely solely on the validator documentation. I was thinking of something like this:

1. When an element does not validate succesfully, class "invalid" is added to it.

2. When an element validates succesfully, 1) class "valid" is added to it, 2) possible class  "invalid" removed, and 3) a function is called to check if all required (having class "required") elements have class "valid". If so, another function is called (to open another section of the form).

Here's my code, please see the comments for details on problems. Thank you!

<script>

  $(document).ready(function(){
    $("#panel form").validate({
        errorPlacement: function(error, element) {
            //works
            element.addClass("invalid");
        },
        success: function(label) {
            //how to get this to work,
            //i.e. how to refer to the actual element, like element.addClass() in errorPlacement?
            //label.addClass("valid");
            checkAll();
        }
    });
  });

  function checkAll(){
 
    //for testing, check all required elements for "invalid class" (since adding "valid" doesn't work yet)
    //in the final version, check if each required element has "valid" class (and cancel if not)
    //problem here is, that this seems to also trigger the validator (?), should be disabled I guess? How?
   
    $("#panel form .required").each(
   
    function(index){
        alert(index);
        if($(this).is(".invalid"))    {
            alert("invalid");
            //invalid required element found, cancel each()
            return false;
        }
    });
   
  }

</script>