I'm new to jquery and am trying to alter an existing page template that uses jquery for a contact form to handle form validation. If the form elements are valid, it submits the data elements to a page that processes it (sends an email). What I'm trying to do is to alter the existing code as I have two additional forms that are on the same page. Essentially, one form is for generating the contact email, a second form contains a couple of elements for submitting a donation request to paypal, and a third form will be similar to the contact email but will contain a few other form elements to provide more info than the standard contact form. 

There are a couple of pieces to the puzzle. First, there is a file called script.js which contains the following: 

```
$(document).ready(function() {
    // hover

    $('#menu> li > a strong').css({opacity:0})

    $('#menu > li').hover(function(){
        $(this).find('> a strong').stop().animate({opacity:1})             
    }, function(){
        if  (!$(this).hasClass('active')&&!$(this).hasClass('sfHover')) {
            $(this).find('> a strong').stop().animate({opacity:0})             
        }
    })

    $('.list1 .img_act').css({opacity:0, display:'none'})

    $('.list1 li').hover(function(){
        $(this).find('.img_act').css({display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})                        
    }, function(){
        $(this).find('.img_act').stop().animate({opacity:0}, function(){$(this).css({display:'none'})})                       
    })

    $("a[data-type^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'facebook',slideshow:3000, autoplay_slideshow: false});
        $('.lightbox-image').hover(function(){
            $(this).find('.play').stop().animate({width:71, height:71, marginTop:-35, marginLeft:-35})
        }, function(){
            $(this).find('.play').stop().animate({width:51, height:51, marginTop:-25, marginLeft:-25})
        })

    $('ul#menu').superfish({
      delay:       600,
      animation:   {height:'show'},
      speed:       600,
      autoArrows:  false,
      dropShadows: false
    });

        //gallery 
    $("#gallery1").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            mouseWheel: true,
            visible: 3,
            vertical: true,
            speed: 600,
            easing: 'easeOutCirc'
    });

    $('#gallery1 a').hover(function(){
        $(this).find('img').stop().animate({opacity:0.7})                           
    },function(){
        $(this).find('img').stop().animate({opacity:1})                         
    })

 });
$(window).load(function() { 
    //bg animate

    $('#bgStretch').bgStretch({
            align:'leftTop',
            navigs:$('#pagination').navigs()
        })
        .sImg({
            spinner:$('.spinner').css({opacity:.7}).hide()
    })

    $('#pagination li').eq(0).addClass('active');

    // scroll
    $('.scroll').cScroll({
        duration:700,
        step:63,
        trackCl:'track',
        shuttleCl:'shuttle'
    })

    // contact form
    $('#ContactForm').forms({
        ownerEmail:'#'
    })  

        // other form
    $('#OtherForm').forms({
        ownerEmail:'#'
    })  

        // contact form
    $('#DonateForm').forms({
        ownerEmail:'#'
    })  

        // contact form
    $('#JoinForm').forms({
        ownerEmail:'#'
    })  

    //content switch
    var content=$('#content'),
        nav=$('.menu');
    nav.navs({
        useHash:true
    })  
    nav.navs(function(n, _){
        content.cont_sw(n);
        $('#menu > li').not('.sfHover').find('>a strong').stop().animate({opacity:0})
        if (_.n!=-1) {
            $('#menu > li').eq(_.n).find('>a strong').stop().animate({opacity:1})
        }
        if (_.n==0) {
            $('#content').stop().animate({height:310})
        } else {
            $('#content').stop().animate({height:510})
        }
    })
    content.cont_sw({
        showFu:function(){
            var _=this          
            $.when(_.li).then(function(){
                _.next.css({display:'block', left:-1500}).stop().animate({left:0},600, function(){

                }); 
            });
        },
        hideFu:function(){
            var _=this
            _.li.stop().animate({left:2000},600, function(){
                _.li.css({display:'none'})
            })
        },
        preFu:function(){
            var _=this
            _.li.css({position:'absolute', display:'none'});
        }
    })
    nav.navs(0);

    var h_cont=950;
    function centre() {
        var h=$(window).height();
        if (h>h_cont) {
            m_top=~~(h-h_cont)/2+12;
        } else {
            m_top=12;
        }
        $('#content').stop().animate({marginTop:m_top})
    }
    centre();
    $(window).resize(centre);

})

```

Then there is a separate file called forms.js which contains the code for the form validation and submission. That's what I'm trying to work with to be able to have my other two forms validated and submitted. Here is the full code for the forms.js (rather than the snippet in the original post):

```
    (function($){
    $.fn.extend({
        forms:function(opt){
            if(opt===undefined)
                opt={}
            this.each(function(){
                var th=$(this),
                    data=th.data('forms'),
                    _={
                        errorCl:'error',
                        emptyCl:'empty',
                        invalidCl:'invalid',
                        successCl:'success',
                        successShow:'4000',
                        mailHandlerURL:'bin/MailHandler.php',
                        ownerEmail:'support@guardlex.com',
                        stripHTML:true,
                        smtpMailServer:'localhost',
                        targets:'input,textarea',
                        controls:'a[data-type=reset],a[data-type=submit]',
                        validate:true,
                        rx:{
                            ".employer":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                            ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                            ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                            ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
                            ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                            ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                            ".message":{rx:/.{20}/,target:'textarea'}
                        },
                        preFu:function(){
                            _.labels.each(function(){
                                var label=$(this),
                                    inp=$(_.targets,this),
                                    defVal=inp.attr('value'),
                                    trueVal=(function(){
                                                var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                                return tmp
                                            })()

                                trueVal!=defVal
                                    &&inp.val(defVal=trueVal||defVal)
                                label.data({defVal:defVal})                             
                                inp
                                    .bind('focus',function(){
                                        inp.val()==defVal
                                            &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                    })
                                    .bind('blur',function(){
                                        !inp.val()
                                            ?inp.val(defVal)                                        
                                            :(_.isValid(label)
                                                ?_.showErrorFu(label)
                                                :_.hideErrorFu(label)),
                                            (_.isEmpty(label)
                                                ?_.showEmptyFu(label)
                                                :_.hideEmptyFu(label))
                                    })
                                    .bind('keyup',function(){
                                        label.hasClass(_.invalidCl)
                                            &&_.isValid(label)
                                                ?_.showErrorFu(label)
                                                :_.hideErrorFu(label)
                                    })
                                label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                            })
                            _.success=$('.'+_.successCl,_.form).hide()
                        },
                        isValid:function(el){
                            var ret=true,
                                empt=_.isEmpty(el)
                            if(empt)
                                ret=false,
                                el.addClass(_.invalidCl)
                            else
                                $.each(_.rx,function(k,d){
                                    if(el.is(k))
                                        d.rx.test(el.find(d.target).val())
                                            ?(el.removeClass(_.invalidCl),ret=false)
                                            :el.addClass(_.invalidCl)
                                })
                            return ret
                        },
                        isEmpty:function(el){
                            var tmp
                            return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                        },
                        validateFu:function(){                          
                            _.labels.each(function(){
                                var th=$(this)                              
                                _.isEmpty(th)
                                    ?_.showEmptyFu(th)
                                    :_.hideEmptyFu(th)
                                _.isValid(th)
                                    ?_.showErrorFu(th)
                                    :_.hideErrorFu(th)
                            })
                        },
                        submitFu:function(){
                            _.validateFu()
                            var id=$(this).attr('id');
                            var action=$(this).attr('action');

                            if(!_.form.has('.'+_.invalidCl).length)
                                $.ajax({
                                    type: "POST",
                                    url:_.mailHandlerURL,
                                    data:{
                                        name:$('.name input',_.form).val()||'nope',
                                        email:$('.email input',_.form).val()||'nope',
                                        phone:$('.phone input',_.form).val()||'nope',
                                        fax:$('.fax input',_.form).val()||'nope',
                                        state:$('.state input',_.form).val()||'nope',
                                        message:$('.message textarea',_.form).val()||'nope',
                                        owner_email:_.ownerEmail,
                                        stripHTML:_.stripHTML
                                    },
                                    success: function(){
                                        _.showFu()
                                    }
                                })          
                        },
                        showFu:function(){
                            _.success.slideDown(function(){
                                setTimeout(function(){
                                    _.success.slideUp()
                                    _.form.trigger('reset')
                                },_.successShow)
                            })
                        },
                        controlsFu:function(){
                            $(_.controls,_.form).each(function(){
                                var th=$(this)
                                th
                                    .bind('click',function(){
                                        _.form.trigger(th.data('type'))
                                        return false
                                    })
                            })
                        },
                        showErrorFu:function(label){
                            label.find('.'+_.errorCl).slideDown()
                        },
                        hideErrorFu:function(label){
                            label.find('.'+_.errorCl).slideUp()
                        },
                        showEmptyFu:function(label){
                            label.find('.'+_.emptyCl).slideDown()
                            _.hideErrorFu(label)
                        },
                        hideEmptyFu:function(label){
                            label.find('.'+_.emptyCl).slideUp()
                        },
                        init:function(){
                            _.form=this
                            _.labels=$('label',_.form)

                            _.preFu()

                            _.controlsFu()

                            _.form
                                .bind('submit',function(){
                                    if(_.validate)
                                        _.submitFu()
                                    else
                                        _.form[0].submit()
                                    return false
                                })
                                .bind('reset',function(){
                                    _.labels.removeClass(_.invalidCl)                                   
                                    _.labels.each(function(){
                                        var th=$(this)
                                        _.hideErrorFu(th)
                                        _.hideEmptyFu(th)
                                    })
                                })
                            _.form.trigger('reset')
                        }
                    }
                if(!data)
                    (typeof opt=='object'?$.extend(_,opt):_).init.call(th),
                    th.data({cScroll:_}),
                    data=_
                else
                    _=typeof opt=='object'?$.extend(data,opt):data
            })
            return this
        }
    })
})(jQuery)

```

Most of this was already included in my page template and works fine. I added the following in the script.js file for the two additional forms

```
// Donate form
$('#DonateForm').forms({
    ownerEmail:'#'
})  

    // join form
$('#JoinForm').forms({
    ownerEmail:'#'
})  

```

I have them working from a validation standpoint. That is to say, they seem to behave properly in the same manner as the original contact form. If you click the button or leave focus of an element you get user feedback indicating the form element is required, for example. But I can't quite figure out how to get them submitted. 

It seems to me the original code in the forms.js was specifically written to submit the contact form. My first thought was to somehow add an additional evaluation on the form name, with each having it's own url value and set of data values pulled from the form. I just am not sure how to do that being new to jquery. As it stands, my other forms seem to get the validation but nothing happens when I hit the submit button.