Javascript Validation Question

#1 scorpion

Group: New Members
Posts: 45
Joined: 15-October 09
LocationMelbourne, Australia

Posted 09 August 2010 - 02:16 AM

I wanted to use target="_blank" to have my external links open in a new tab. I found of course that this is only valid in XHTML so I have given all my webpages the following definition:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

After wading through and correcting all the errors that W3C Validation picked up, I am left with 2 that appear in a Javascript routine that I use to allow a reader to send me an email. I am not versed in the intricacies of Javascript. Can I have some help please?

The routine is:-

<script type="text/javascript">
		//-- Mail Variables - 
		emailname = "info"
		emailserver = "irishtype3dna.org"
		emailsubject = "?Subject=Information Requested"
		// -- Show Envelope Here: 
		document.write("<a href='mailto:" + emailname + "@" + emailserver + emailsubject + "' >");
		document.write("<img src='images/envelope.jpg' width="61" height="31" border="0" alt="" />");
		document.write("</a>");
		// --  Show a Text Reference Here:
		document.write("<font face='Monotype Corsiva' color='008000' size="3" >");
		document.write("<a href='mailto:" + emailname + "@" + emailserver + emailsubject + "' >");

		document.write(" Mail: Information Requested");

		document.write("</a>");
		document.write("</font>");
	 </script>

Errors are:-

Line 399, Column 89: document type does not allow element "a" here
…ite("<a href='mailto:" + emailname + "@" + emailserver + emailsubject + "' >");

Line 403, Column 73: document type does not allow element "font" here
document.write("<font face='Monotype Corsiva' color='008000' size="3" >");

#2 Ben

Group: Administrators
Posts: 5,419
Joined: 19-December 08
LocationChico, CA

Posted 09 August 2010 - 02:45 AM

As far as I understand that, this is an error with the HTML, not directly with the Javascript. What's the parent element of the <a> and <font> in the errors above? I've run into this before when I put an inline element within a <form> tag without a block element (div, p tag, etc) surrounding it. Any chance that this might fix it?

Benjamin Falk | Falken Creative : Twitter : KillerSites Screencast Blog
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

#3 scorpion

Group: New Members
Posts: 45
Joined: 15-October 09
LocationMelbourne, Australia

Posted 10 August 2010 - 12:51 AM

falkencreative, on 09 August 2010 - 06:45 PM, said:

Well I tried wrapping with a <p> ... </p> and with a <div> ... </div> but no joy.
I had wanted to give some sort of protection against spammers harvesting email addresses, and the Javascript had worked fine in HTML Strict, but not, it seems in XHTML Transitional.

For the moment at least, I have gone back to the usual HTML code with a corresponding id in the CSS for font and size of the text:-

<div id="mail">	
	<p><a href='mailto:info@irishtype3dna.org?Subject=Information%20Request' target="_blank">
        <img src="/images/envelope.jpg" alt="" width="61" height="31" border="0"  /> Information Request</a></p>
</div>

This has validated to XHTML 1.0 Transitional. I will keep looking for a javascript routine that validates in XHTML.

Cheers

#4 Ben

Group: Administrators
Posts: 5,419
Joined: 19-December 08
LocationChico, CA

Posted 10 August 2010 - 01:10 AM

Huh. I'm not sure how much more help I can offer here... To be honest, if this were my site, as long as it works in the browser and any visitors won't be affected, I wouldn't worry about it too much. Sometimes you have to pick and choose your battles when it comes to validation, and maybe this is one case where it's fine to have this element break validation.

If anyone else has any ideas as to what might fix this error, please post. It's probably something simple that we're overlooking.

Benjamin Falk | Falken Creative : Twitter : KillerSites Screencast Blog
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

#5 scorpion

Group: New Members
Posts: 45
Joined: 15-October 09
LocationMelbourne, Australia

Posted 10 August 2010 - 01:39 AM

falkencreative, on 10 August 2010 - 05:10 PM, said:

Hmmm .. indeed! I tried the semicolons but the errors are still there. AND, I found the "" that the validator said were needed around the width="61" height="31" etc, actually caused the Envelope to disappear altogether! I am flying completely in the dark, and unless or until I can find a routine that I can 'lift', I will just stick to the HTML method as in my last post.

Thanks anyway.

#6 Wickham

Group: Advanced Member
Posts: 1,732
Joined: 20-December 08
LocationSalisbury UK

Posted 10 August 2010 - 03:12 AM

For what it's worth, I've also had javascript validation problems with a munged email address in HTML (but no error in XHTML) using code

<div>

<span class="px-small">
Email: <script TYPE="text/javascript">
<!--
// protected email script
emailE='my-name'
emailE=(emailE + '@' + 'hotmail.com') 
document.write('<a href="mailto:' + emailE + ' ">' + ' me ' + '</a>')
 //-->
</script>
</span>

<NOSCRIPT>
<span class="px-small">Email address protected by JavaScript.<br>
Please enable JavaScript to contact me.</span>
</NOSCRIPT>

</div>

where the error for HTML page is "end tag for element "A" which is not open" when it clearly has been opened.

I've never found an answer and I've been tempted to use XHTML for those pages.

Make sure you are using a text editor that doesn't add special functions to " or ' (like Word does) and experiment with ' instead of "

This post has been edited by Wickham: 10 August 2010 - 03:18 AM

#7 scorpion

Group: New Members
Posts: 45
Joined: 15-October 09
LocationMelbourne, Australia

Posted 10 August 2010 - 03:32 AM

Wickham, on 10 August 2010 - 07:12 PM, said:

For what it's worth, I've also had javascript validation problems with a munged email address in HTML (but no error in XHTML) using code

<div>

<span class="px-small">
Email: <script TYPE="text/javascript">
<!--
// protected email script
emailE='my-name'
emailE=(emailE + '@' + 'hotmail.com') 
document.write('<a href="mailto:' + emailE + ' ">' + ' me ' + '</a>')
 //-->
</script>
</span>

<NOSCRIPT>
<span class="px-small">Email address protected by JavaScript.<br>
Please enable JavaScript to contact me.</span>
</NOSCRIPT>

</div>

Thanks Wickham.
Initially I had 8 errors with XHTML validation but after using lower case for TYPE, both instances of NOSCRIPT and changing <br> to br/> your code passed muster!

I will now have a play to see if I can include the Envelope image and I will be away.

Cheers!

#8 Wickham

Group: Advanced Member
Posts: 1,732
Joined: 20-December 08
LocationSalisbury UK

Posted 10 August 2010 - 03:39 AM

My code was for HTML where upper case is OK and tags are closed with > not /> so it's not surprising that you had to edit them.

#9 scorpion

Group: New Members
Posts: 45
Joined: 15-October 09
LocationMelbourne, Australia

Posted 10 August 2010 - 03:58 AM

scorpion, on 10 August 2010 - 07:32 PM, said:

I have played with your code and now have this which works and validates to XHTML:-

	<div id="mail">
 <script type="text/javascript">
<!-- // protected email script
	emailE='info'
	emailE=(emailE + '@' + 'irishtype3dna.org?Subject=Information%20Request') 
	document.write('<a href="mailto:' + emailE + ' ">' + '<img src="/images/envelope.jpg" alt="" width="61" height="31" border="0"  /> Mail: Information Request</a>')
 //-->
</script>

<noscript>
	<p>Email address protected by JavaScript.<br/>
	Please enable JavaScript to contact me.</p>
</noscript>
	</div>

One happy camper!!!
I wonder if it was the commenting out of the javascript code that allowed the full validation?