Show hidden div using jQuery with LiveValidation Javascript object

I am still pretty new to jQUery and Javascript, so I might be missing something pretty obvious here.

I have a form which I am using LiveValidation on.

My problem is that I want to display a hidden div (and hide a div (id: main) which was already shown on the screen) when the user hits the submit button, and I can't seem to get it to work. If I submit the form with all of the fields validated, the hidden div never shows.

In a perfect world, I would like to get the hidden div (id: processing_box) to show when all the form elements are validated at form submission, and when they aren't, the hidden div doesn't show.

Does the LiveValidation object attach itself to the onsubmit event? There's a massvalidate function which I have tried to use, and have been unsuccessful at doing so.

Here is a little snipped of code that I was using to try to accomplish this:

<script type="text/javascript">
    $(document).ready(function(){
      $("#btnApply").click(function(){

          var areAllValidated = LiveValidation.massValidate ([homephoneareacode, homephoneprefix, homephonesuffix])
          if (areAllValidated == true ){
            $("#processing_box").show();
            $("#main").hide();
          }
      });
    });
    </script>

Solution

I've never used LiveValidation, so I don't know if that code works or not. However, try putting alert() after the if statement to see if that code actually runs. If it doesn't run, then reread the livevalidation documentation; you're doing something wrong. Otherwise, it's something wrong with your jQuery code. Instead of show() and hide(), try .css('display','block') and .css('display','none')