[SOLVED] Validation Problem with Code

[Fluoresce]

I use the script below on one of my pages. It limits the number of characters a user can enter into my text area.

 

Script:

 

<script type="text/javascript">
function textCounter(field,cntfield,maxlimit) 
{
if (field.value.length > maxlimit) // If too long, trim it.
	field.value = field.value.substring(0, maxlimit);
// Otherwise, update 'characters left' counter
else
	cntfield.value = maxlimit - field.value.length;
}
</script>

 

HTML:

 

<form method="post" name="myForm" action="process.php">

<textarea name="prod" cols="72" rows="3"
onkeydown="textCounter(document.myForm.prod_serv,document.myForm.remLen1,255)"
onkeyup="textCounter(document.myForm.prod_serv,document.myForm.remLen1,255)"></textarea>
<br />
<input readonly="readonly" type="text" name="remLen1" size="3" maxlength="3" value="255" />
characters left

</form>

 

The script works fine. However, the HTML does not validate.

 

My Doctype is XHTML 1.0 Strict. Apparently, the 'name' attribute cannot be used in the <form> tag. It's been deprecated for id. However, when I change it to id, the script doesn't work. Anyone know how I can fix this?

 

My bookmark script also generates validation errors:

 

function bookmarksite(title,url)
{
if (window.sidebar) // firefox
	window.sidebar.addPanel(title, url, "");
else if(window.opera [b]&&[/b] window.print){ // opera
	var elem = document.createElement('a');
	elem.setAttribute('href',url);
	elem.setAttribute('title',title);
	elem.setAttribute('rel','sidebar');
	elem.click();
} 
else if(document.all)// ie
	window.external.AddFavorite(url, title);
}

 

The two ampersands (&) are the problem. First, a warning is given for each one: "character '&' is the first character of a delimiter but occurred as data". Then, an error is given: "XML Parsing Error: xmlParseEntityRef: no name".

 

Anyone know how I can clean this up so it'll validate?

[Psycho]

The only place you are using the form name is within the triggers. And, you are using it to pass an object. Just give those objects an ID and pass using getElementById(). (NOTE: not sure if it is a typo or not, but the code you posted is referencing a field called 'prod_serv', but you have a field called 'prod'.)

 

<form method="post" name="myForm" action="process.php">

<textarea name="prod" id="prod" cols="72" rows="3"
onkeydown="textCounter(document.getElementById('prod'), document.getElementById('remLen1'), 255)"
onkeyup="textCounter(document.getElementById('prod'), document.getElementById('remLen1'), 255)"></textarea>
<br />
<input readonly="readonly" type="text" name="remLen1" id="remLen1" size="3" maxlength="3" value="255" />
characters left
</form>

 

For the second problem, I am assumign the bold tags () were only added for the forum post to try and bold it for emphasis (but does not work within code tags). I would thinkn that would work. Try doing this:

else if((window.opera) && (window.print)){ // opera

[Fluoresce]

Thanks, MJ! Your fix for the textarea code worked.

 

Yes, the prod_serv thing was just a mistake. I didn't want to give the name of my field away, so I changed it before posting it in the forum. Only problem is, I forgot to change the other one. 

 

Yes, the bold tags were added for the forum. I didn't know that they wouldn't work in the code tag.

 

I appreciate your attempt at the bookmarking script, but it didn't work. The ampersands (&) are causing the validation problem. In your fix, the ampersands are still there.

 

Anyone know how the ampersands can be removed without compromising the integrity of the script?

[Fluoresce]

MJ, now that you've made the changes to the textarea and input tags, am I right in thinking that the name attribute in the input tag is no longer required?

 

<input readonly="readonly" type="text" name="remLen1" id="remLen1" size="3" maxlength="3" value="255" />

[Psycho]

MJ, now that you've made the changes to the textarea and input tags, am I right in thinking that the name attribute in the input tag is no longer required?

 

<input readonly="readonly" type="text" name="remLen1" id="remLen1" size="3" maxlength="3" value="255" />

 

Only if you are not actually POSTing those values. Otherwise I don't know how the data will come across to the processing page.

[Fluoresce]

Only if you are not actually POSTing those values. Otherwise I don't know how the data will come across to the processing page.

 

Cool, I will delete them, then. The data in the input fields don't get posted. The input fields just show the character count.

 

Thanks for the help, MJ.

[Psycho]

OK< found solution to the other problem with a Google search. I'm not entirely familiar with this or why so do any additional searching as needed. But, you need to wrap your javascript code is CDATA tags as follows:

 

<script type="text/javascript">
//<![CDATA[
function bookmarksite(title,url)
{
    if (window.sidebar)
    {
        // firefox
        window.sidebar.addPanel(title, url, "");
    }
    else if (1==1 && 2==2)
    {
        // opera
        var elem = document.createElement('a');
        elem.setAttribute('href',url);
        elem.setAttribute('title',title);
        elem.setAttribute('rel','sidebar');
        elem.click();
    }
    else if (document.all)
    {
        // ie
        window.external.AddFavorite(url, title);
    }
}
//]]>
</script>

[Fluoresce]

MJ, if you can remember, I dubbed you my PHP Grand Master a few weeks ago. You have been equally helpful in this matter and others, relating to Javascript. I hereby proclaim you my web programming Grand Master.

 

I've learnt loads off you, dude. The scripts that you have given me I have taken apart, studied, rearranged and played with, sometimes spending hours just staring at them, mentally going over the procedure of their functions. I've learnt a great deal that way, and I appreciate it.

 

Going back to the subject, the CDATA tags were the perfect fix. They hide the ampersands from the XML parser, which doesn't allow them. The problem is, when the CDATA tags are used, the Javascript doesn't work, which is why the tags must be commented out, just like you demonstrated. This way, the CDATA tags hide the illegal Javascript characters from the XML parser, and the comment thingies hide the CDATA tags from the browsers. XML-disallowed characters are often used in Javascript, making CDATA tags an important tool in matters relating to validation.

 

For anyone who's interested, here's W3Schools.com's CDATA entry:

 

http://www.w3schools.com/XML/xml_cdata.asp

 

Note that the page above doesn't say anything about the need to comment out the tags. That's explained clearly here:

 

http://javascript.about.com/library/blxhtml.htm

 

But before I mark this topic solved, one last and very quick thing, MJ . . .

 

You changed my bookmark script. The line with the ampersands was changed from "else if(window.opera && window.print)" to "else if (1==1 && 2==2)". I'm assuming that "window.opera" and "1==1", and "window.print" and "2==2", are interchangable, and that the script's compatibility has not been altered in any way. Is that correct?

[Psycho]

Sorry, the 1==1 and 2==2 were my playing with the code to validate that the "window.opera" and the "window.print" were not the cause of the problem (for example, maybe the window.opera was expecting some code to follow). So, I decided to change the 'tests' to something I absolutely knew should work to rule that out. Just change those tests back to what you originally had.

[Fluoresce]

Sorry, the 1==1 and 2==2 were my playing with the code to validate that the "window.opera" and the "window.print" were not the cause of the problem (for example, maybe the window.opera was expecting some code to follow). So, I decided to change the 'tests' to something I absolutely knew should work to rule that out. Just change those tests back to what you originally had.

 

Ah, that explains it. I was thinking, how the heck can 1==1 be equivalent to window.opera! You had me quite confused. But then I thought, why else would he change it? It must be some kind of adjustment to improve the script. I didn't think that you might have left something in there by mistake after having played with it.

 

Anyway, I appreciate the help very much.

 

Topic solved.