LiveValidation JavaScript in templates

[razec]

I've created some new vBulletin powered pages on my forum and these make use of the templates. Prior to doing it this way, with vB 3.8 I was using vBAdvanced and had these new pages integrated as PHP pages. These pages include forms that users must fill out, and to help make it easier I had used LiveValidation (www.livevalidation.com) to do error checking on the fields.

I can't seem to include the JavaScript in the templates. When I do, it throws an error message when I try to save:

The following error occurred when attempting to evaluate this template:

Parse error: syntax error, unexpected ';' in /home/user/html/includes/adminfunctions_template.php(4667) : eval()'d code on line 142

This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

So I put the JavaScript in a separate JS file and included it in the template. When I do it this way, the JavaScript simply doesn't work properly. I'm including it using:

<script type="text/javascript" src="form_validation.js"></script>

Which I know is valid. The problem is that when the pages load, the browser shows a JavaScript error that says the first field I reference ("CompanyName") doesn't exist ("Message: LiveValidation::initialize - No element with reference or id of 'CompanyName' exists!"). It does, though. This all works perfectly on my vB3 site. I don't know why the JavaScript doesn't seem to see the fields I'm using.

I know this is difficult without showing the templates, but can anyone think of what the problem is? I don't understand how this can work perfectly with vB3 but not work with vB4, because it certainly doesn't seem to be dependent on the vBulletin software. I suspect it's because of the way vBulletin is generating the page from the templates. I didn't use vB templates for my forms in the past, so that's the only thing that makes sense to me.

I've already included the livevalidation class script in the header template, which is the same way I did it in vB3. But for each form that I want to validate, I need to include a script like the one below. I had previously added this block just after I put the </form> tag.

	<script type="text/javascript">
		var v_CompanyName = new LiveValidation( 'CompanyName', { validMessage: vMsg, onlyOnSubmit: true } );
		v_CompanyName.add( Validate.Presence, { failureMessage: vFMsg } );

		var v_StreetAddress = new LiveValidation( 'StreetAddress', { validMessage: vMsg, onlyOnSubmit: true } );
		v_StreetAddress.add( Validate.Presence, { failureMessage: vFMsg } );

		// truncated
		
		var automaticOnSubmit = v_CompanyName.form.onsubmit;

		v_CompanyName.form.onsubmit = function()
		{
			var valid = automaticOnSubmit();
			
			if (!valid)
				alert('One or more required fields were omitted or submitted with invalid values. Please review the form and ensure that you have filled out all of the required fields. Missing fields are highlighted in red.');

			return valid;
		}
	</script>

The point of this code is that when the user clicks the Submit button, LV validates the fields then (instead of on-the-fly). If a field is missing or doesn't meet the criteria I set, the form doesn't get posted.