Results 1 to 4 of 4

Thread: How to validate input in RTE form field?

  1. #1
    Join Date
    Aug 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to validate input in RTE form field?

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    HTML Code:
    <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:

    Code:
    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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:

    Code:
    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:

    Code:
    window.frames.rte1.focus();
    Where rte1 is the fieldname used to create the editor, ex (comment green, fieldname red):

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •