How to validate input in RTE form field?

[Colin]

1) Script Title: Rich Text Editor (for textareas)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...itor/index.htm

3) Describe problem: I'd like to validate that the user has input something into this dynamically created form field like I validate other fields. Is there a way to do that?

[jscheuer1]

When would you want to validate it? Like with a normal text input in a normal form, you would assign an onchange, onblur, and/or onkeyup, etc. event to the input and then check its value against one or more tests of one kind or another. Sometimes you don't even bother validating until the form is submitted. That would be the easiest here. On the demo.htm there is already an onsubmit function that accesses the value of the hidden rte1 input that the script generates and places in the form:

<form name="RTEDemo" action="demo.htm" method="post" onsubmit="return submitForm();">
<script language="JavaScript" type="text/javascript">
<!--
function submitForm() {
	//make sure hidden and iframe values are in sync before submitting form
	//to sync only 1 rte, use updateRTE(rte)
	//to sync all rtes, use updateRTEs
	updateRTE('rte1');
	//updateRTEs();
	alert("rte1 = " + document.RTEDemo.rte1.value);
	
	//change the following line to true to submit form
	return false;
}

//Usage: initRTE(imagesPath, includesPath, cssFile)
initRTE("images/", "", "");
//-->
</script>

After a little extra typing in the editor, so that it shows:

here's the "preloaded content"
Hola! Bob. ahh

This hidden input's value is:

here's the "<em>preloaded</em> <b>content</b>"<br>Hola!<span style="font-weight: bold;"> Bob.</span> ahh<br>

The DOM node of this script generated hidden input is seen by the browser as:

<input id="hdnrte1" name="rte1" value="
here's the &quot;&lt;em&gt;preloaded&lt;/em&gt; &lt;b&gt;content&lt;/b&gt;&quot;&lt;br&gt;Hola!&lt;span style=&quot;font-weight: bold;&quot;&gt; Bob.&lt;/span&gt; ahh&lt;br&gt;" type="hidden">

All that's just to give you a rough idea of what's going on. So to answer your question, you could do something like so (there are many possible variations) for the submitForm function:

function submitForm() {
	//make sure hidden and iframe values are in sync before submitting form
	//to sync only 1 rte, use updateRTE(rte)
	//to sync all rtes, use updateRTEs
	updateRTE('rte1');
	//updateRTEs();
	if(isValid(document.RTEDemo.rte1.value)){
	return true;
	}
	alert('Please Follow the Required Input Parameters.');
	return false;
}

In this particular approach, the isValid function would be your validation routine that returns true if the value passes, false otherwise. If the value of the hidden field passes, the form submits, otherwise the alert is popped.

The crucial thing to know though is that the value will contain the tags (unseen to the user except for their effect on the appearance of the text in the editor), something like as stated above:

here's the "<em>preloaded</em> <b>content</b>"<br>Hola!<span style="font-weight: bold;"> Bob.</span> ahh<br>

So you will have to allow these tag and attribute characters in your validation routine.

What do you want to validate the content to? What sort of rules were you thinking of imposing on it?

[Colin]

Thanks for responding. Your answer led me directly to the solution I was hoping for. One final question...with the rest of my validation I am using a couple statements such as
document.getElementById("Investment").select();
document.getElementById("Investment").focus();
to place the cursor where additional editing is required. I can't figure out how to do the same with the dynamic form field that the rte code is generating. Any guidance there?

[jscheuer1]

I think there is a way to select all the text in the Rich Text Editor. But it would take me some time to work that out (it's complex and varies by browser on at least two levels, and there doesn't appear to already be a function for it in the richtext.js script). However, your example code (as given):

document.getElementById("Investment").select();
document.getElementById("Investment").focus();

Will in most cases only focus on the element, not select its content. For that one would usually need to do:

document.getElementById("Investment").focus();
document.getElementById("Investment").select();

Anyways, to focus on the editor, and this might not be cross browser (works in Firefox 3 and IE 7), one can do:

window.frames.rte1.focus();

Where rte1 is the fieldname used to create the editor, ex (comment green, fieldname red):

//Usage: writeRichText(fieldname, html, width, height, buttons, readOnly)
writeRichText('rte1', 'here\'s the "<em>preloaded</em> <b>content</b>"', 400, 200, true, false);