trigger a function in a different code

[cast_no_shadow]

I have two javascript codes:

The first one is a "onscreen keyboard" that allows to write special characters in an input:

<script type="text/javascript">
$(function(){
	var $write = $('#theFieldID'),
		shift = false,
		capslock = false;
	
	$('#keyboard li').click(function(){
		var $this = $(this),
			character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
		
		// Shift keys
		if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();
			
			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		}
		
		// Caps lock
		if ($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		}
		
		// Delete
		if ($this.hasClass('delete')) {
			var html = $write.val();
			
			$write.val(html.substr(0, html.length - 1));
			return false;
		}
		
		// Special characters
		if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
		if ($this.hasClass('space')) character = ' ';
		if ($this.hasClass('tab')) character = "\t";
		if ($this.hasClass('return')) character = "\n";
		
		// Uppercase letter
		if ($this.hasClass('uppercase')) character = character.toUpperCase();
		
		// Remove shift once a key is clicked.
		if (shift === true) {
			$('.symbol span').toggle();
			if (capslock === false) $('.letter').toggleClass('uppercase');
			
			shift = false;
		}
		
		// Add the character
		$write.val($write.val() + character);
		theFormID.theFieldID.focus();
	});
});

</script>

The second code allows to check if the user answer is right on wrong as he types:

<script type="text/javascript">
// Check if the answer of the user is right or wrong with javasript
function validateAsYouType(inputElementId)
{

	var valx = inputElementId.value;
	var randomWord = "vás";

	if (valx.length <= randomWord.length && valx == randomWord.substr(0, valx.length)) 
		{
			document.getElementById("theFieldID").style.color="blue"; // If right, put it in blue
		}

	else
		{
			document.getElementById("theFieldID").style.color="red"; // If wrong, put it in red
		}

	if( valx == randomWord)
		{
			document.getElementById("theFieldID").style.color="#339933"; // If right, put it in green
		} 
}

</script>

Now I'm triggering the function "validateAsYouType" with a javascript onkeyup event:

<form name='bank_words' action='answer.php' method='GET' id='theFormID'>

<input onkeyup='return validateAsYouType(this);'   type='text' name='user_answer' autocomplete='off' id='theFieldID' autofocus='autofocus' autofocus />

<script type='text/javascript'>theFormID.theFieldID.focus();</script>
		
		    <ul id='keyboard'  >
				<li class='letter' >á</li><li class='letter'>č</li><li class='letter'>ď</li><li class='letter'>é</li><li class='letter'>ě</li><li class='letter'>í</li><li class='letter'>ň</li><li class='letter'>ó</li><li class='letter'>ř</li><li class='letter'>š</li><li class='letter'>ť</li><li class='letter'>ů</li><li class='letter'>ú</li><li class='letter'>ý</li><li class='letter'>ž</li></ul>
			</ul> 
			
    	</form>

Problem is that the function "validateAsYouType" is not trigered when you execute the first code because no key is pressed.

How can I trigger the function "validateAsYouType" is the first code? that is when the user clicks on the special letter then execute function "validateAsYouType"?

Thanks a lot!