Jquery Validation 2 forms

I'm running into a problem with jquery.validate. I have 2 forms on 1 page. the first form is an image upload. which ajax hijacks the post of, uploads the image and returns the image to the screen then updates a hidden input(vLogo) in the second form with the image name.

What I would like to do is if the hidden input is empty have the element from the first form highlighted as required when the 2nd form is validated. I hope that makes sense. Hopefully somebody can help me out. Here is an example of the forms:

FORM 1 - image upload form

<form class="logoform" id="mLogo">
    <tr>
        <td>
            <div id="logoContainer">
                <span id="logoarea"> <img id="thumb" width="100px" height="100px" src="images/logo_placeholder.gif" border="0"></span>
            </div>
        </td>
        <td colspan=2>
            <table cellspacing=0 cellpadding=3 border=0>
                <tr>
                    <td class="field"><input type="file" name="upload1" id="upload1" class="required"></td>
                </tr>
                <tr> 
                    <td align="right"><input type="submit" value="Add Logo" name="addlogo" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"></td>
                </tr>
                &开发者_StackOverflow社区lt;tr>
                    <td class="flabel"><label for="volvoLogo">Logo Upload</label></td>
                </tr>
            </table> 
        </td>
    </tr>           
</form>

FORM 2 Data Collection

<form id="customcal" action="processCal.cfm" method="post">
    <tr>
        <td colspan=3 class="flabel"><label for="c_dealerName">Dealer Name</label></td>
    </tr>
    <tr>
        <td colspan=3 class="field"><input type="text" name="c_dealerName" class="required"></td>
    </tr>
    <tr>
        <td class="flabel"><label for="c_phone">Phone</label></td>
        <td colspan=2 class="flabel"><label for="c_fax">Fax</label></td>
    </tr>
    <tr>
        <td class="field"><input type="text" name="c_phone" class="required phone"></td>
        <td class="field" colspan=2><input type="text" name="c_fax" class="required phone"></td>
    </tr>
    <tr>
        <td colspan=3 class="flabel"><label for="c_website">Website Address</label></td>
    </tr>
    <tr>
        <td colspan=3 class="field"><input type="text" name="c_website" class="required"></td>
    </tr>
    <input type="hidden" name="vLogo" id="vLogo" class="required">
    <tr> 
        <td colspan=3 align="right"><input type="submit" value="Submit" id="subform" name="submit" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"></td>
    </tr>
</form>

JQUERY VALIDATION THUS FAR

$("#customcal").validate({
    invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();

        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted below'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("div.error span").html(message);
            $("div.error").show();
        } else {
            $("div.error").hide();
        }
    },
    onkeyup: false,     
    submitHandler: function() {         
        $("div.error").hide();                  
        form.submit();      
    }
});

First you need to give your forms a common class .form_validate or something generic.

Then do an each loop over the forms and apply the validation to that item.

$('.form_validate').each(function(i, form){

    $(form).validate({

        /* Your Validation Code */

    });

});