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.

[derfelix]

i had a similar errof for a javascript..
the problem is putting var inside a function...

to solve it put the content of the javascript
inside

	<script type="text/javascript">
<vb:litteral>
		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;
		}
</vb:litteral>
	</script>

or other solution
declare the var valid;
outside of the function...
at the beginning of the script.. that should work also...
inside the function you then only have:
valid = automaticOnSubmit();

F-

The template parser just doesnt like the word var inside curly brackets.....

[Lynne]

It's <vb:literal>, not <vb:litteral>

[razec]

Hmm, it's still giving me the same error. This is what my template looks like now (different one, shorter than the one I was referring to earlier so I'll use this one as my example):

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
	<head>
		<title>{vb:raw vboptions.bbtitle}</title>
		{vb:raw headinclude}
		<script type="text/javascript">
			<vb:literal>
				// Default valid message
				var vMsg = ' Ok.';
				var vFMsg = ' This field is required.';
				
				var v_BusinessName = new LiveValidation( 'BusinessName', { validMessage: vMsg, onlyOnSubmit: true } );
				v_BusinessName.add( Validate.Presence, { failureMessage: vFMsg } );

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

				var v_ContactPhone = new LiveValidation( 'ContactPhone', { validMessage: vMsg, onlyOnSubmit: true } );
				v_ContactPhone.add( Validate.Presence, { failureMessage: vFMsg } );
				
				var automaticOnSubmit = v_BusinessName.form.onsubmit;
				var valid;

				v_BusinessName.form.onsubmit = function()
				{
					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;
				}
			</vb:literal>
		</script>
	</head>
	<body>
		{vb:raw header}

		{vb:raw navbar}

		<br/><h2 class="blockhead">{vb:raw pagetitle}</h2>
		<div class="blockbody">
			<div class="blockrow">
				<vb:if condition="$show['member']">
					<vb:if condition="is_member_of($bbuserinfo, 12)">
						<p>Please provide your business' contact information below.</p><br/>

						<form action="companyinfo_submit.php" method="POST" name="companyinfo">
							<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}"/>
							
							<table border="0" align="center" width="500px">
								<tr>
									<td align="right" valign="center"><b>Business Name:</b></td>
									<td valign="center">&nbsp;<input type="text" name="BusinessName" size="30"/></td>
								</tr>
								<tr>
									<td align="right" valign="center"><b>Website Address:</b></td>
									<td valign="center">&nbsp;<input type="text" name="Website" size="30"/></td>
								</tr>
								<tr>
									<td align="right" valign="center"><b>Contact Name:</b></td>
									<td valign="center">&nbsp;<input type="text" name="ContactName" size="30"/></td>
								</tr>
								<tr>
									<td align="right" valign="center"><b>Contact Phone:</b></td>
									<td valign="center">&nbsp;<input type="text" name="ContactPhone" size="30"/></td>
								</tr>
								<tr>
									<td align="center" valign="center" colspan="2"><input type="submit" name="cmdSubmit" value="Send"/></td>
								</tr>
							</table>
						</form>
					<vb:else />
						{vb:rawphrase not_authorized_form_err}
					</vb:if>
				<vb:else />
					{vb:rawphrase not_logged_in_form_err}
				</vb:if>
			</div>
		</div>

		{vb:raw footer}
	</body>
</html>

It keeps telling me:

Message: LiveValidation::initialize - No element with reference or id of 'BusinessName' exists!
Line: 80
Char: 24
Code: 0

As you can see, though, BusinessName is definitely there. In case you're wondering, I've included the LiveValidation class in the headinclude template.

[derfelix]

Originally Posted by razec

It keeps telling me:



As you can see, though, BusinessName is definitely there. In case you're wondering, I've included the LiveValidation class in the headinclude template.

Nope, I think BusinessName NOT there, at least NOT at the time the javascript is called...
You have it at the top..., when the html below is not rendered yet..
I personnally would do it differently..

in the form put a onsubmit="checkthisform()"

then embed all the js in a function called checkthisform()

(you would have to put the v_BusinessName.form.onsubmit = function() in a second function outside the checkthisform

F.

[razec]

I've tried putting the script immediately after the </form> tag (before the <vb:else/>) and it gives me the same error. I really can't think of what I'm missing here.

[derfelix]

add it in footer after the vbulletin init...
because maybe you are using stuff that is in the vbulletin.js
and that is only available after the init in footer..
(just a thought)

i have a checkform script...
again.. it is only called AFTER the onsubmit.. (even the vars are only defined AFTER the onsubmit)
AND the onsubmit is in the form tag.. that works!!!