I'm currently trying to make a contact form using mootools FormCheck and mootools Form.Send in conjunction with each other.

Each one will function correctly individually, but once I have all three:

mootools.js (required by form.send)
mootools-more.js (required by FormCheck)
mootools-core.js (required by FormCheck)

linked in my header, the form.send becomes dominant and my formcheck doesn't function at all.

I'm specifically using form.send so that I can post a success (or failure) message without reloading the contact page. I'm using FormCheck - obviously to check that required fields are filled out.


I have stripped the form from the website itself here. and here are the two pieces of code I'm using:

FormCheck
Code:
<script type="text/javascript">
    window.addEvent('domready', function(){
        new FormCheck('myform');
    });
	</script>
Form.Send
Code:
<script type="text/javascript">
var fx = {
	'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
	'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
	'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
};

var showHide = function( el ){
	fx.loading.set(0);
	(fx[ el ]).start(0,1);
	(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
}

$('submit').addEvent( 'click', function(evt){
	new Event(evt).stop();
	$('myform').send({
		onRequest: function(){
			fx.loading.start( 1,0 );
		},
		onSuccess: function(){
			showHide( 'success' );
		},
		onFailure: function(){
			showHide( 'fail' );
		}
	});
} );
</script>
I have no idea what I'm doing with javascript, but I imagine I need a line that tells the script if FormCheck is successful, run Form.Send ? Anything would help at this point.

--Eric