JS Validating Multiple Instances

I have a page with 4 FCKeditor textareas. I need to validate that each contains something. The validation works on the first instance, but the next instance fails with "growth is undefined." Any advice?

window.onload = function() {
   var oFCKeditor = new FCKeditor( 'strengths' );
   oFCKeditor.BasePath = '/FCKeditor/';
   oFCKeditor.ToolbarSet = 'GL-Minimal';
   oFCKeditor.Width = '580px';
   oFCKeditor.Height = '200px';
   oFCKeditor.ReplaceTextarea();
   
   var oFCKeditor = new FCKeditor( 'growth' );
   oFCKeditor.BasePath = '/FCKeditor/';
   oFCKeditor.ToolbarSet = 'GL-Minimal';
   oFCKeditor.Width = '580px';
   oFCKeditor.Height = '200px';
   oFCKeditor.ReplaceTextarea();
   
   var oFCKeditor = new FCKeditor( 'objectives' );
   oFCKeditor.BasePath = '/FCKeditor/';
   oFCKeditor.ToolbarSet = 'GL-Minimal';
   oFCKeditor.Width = '580px';
   oFCKeditor.Height = '200px';
   oFCKeditor.ReplaceTextarea();
   
   var oFCKeditor = new FCKeditor( 'comments' );
   oFCKeditor.BasePath = '/FCKeditor/';
   oFCKeditor.ToolbarSet = 'GL-Minimal';
   oFCKeditor.Width = '580px';
   oFCKeditor.Height = '200px';
   oFCKeditor.ReplaceTextarea();
}

function validator(theForm)
{
   var strengths = FCKeditorAPI.GetInstance('strengths');
   if (strengths.GetXHTML(true) == "" || strengths.GetXHTML(true) == null)
   {
      alert("Please enter a value for \"Performance Strengths\".");
      return (false);
   }

   var growth = FCKeditorAPI.GetInstance('growth');
   if (growth.GetXHTML(true) == "" || growth.GetXHTML(true) == null)
   {
      alert("Please enter a value for \"Targeted Growth Areas\".");
      return (false);
   }

   var objectives = FCKeditorAPI.GetInstance('objectives');
   if (objectives.GetXHTML(true) == "" || objectives.GetXHTML(true) == null)
   {
      alert("Please enter a value for \"Priority Performance Objectives\".");
      return (false);
   }

   var comments = FCKeditorAPI.GetInstance('comments');
   if (comments.GetXHTML(true) == "" || comments.GetXHTML(true) == null)
   {
      alert("Please enter a value for \"General Comments\".");
      return (false);
   }

   return (true);
}

<form action="appraisal-other.php" method="post" onsubmit="return validator(this)" class="login">
   <textarea name="strengths" id="strengths" cols="70" rows="10"></textarea>
   <textarea name="growth" id="growth" cols="70" rows="10"></textarea>
   <textarea name="objectives" id="objectives" cols="70" rows="10"></textarea>
   <textarea name="comments" id="comments" cols="70" rows="10"></textarea>
   <input type="submit" value="Submit&nbsp;&raquo;" class="button" /></p>
</form>

Tue, 09/30/2008 - 22:20

grayloon

Joined: 06/11/2007

Posts: 11

Re: JS Validating Multiple Instances

Come on guys. Surely, someone has tackled this already.

Wed, 10/08/2008 - 18:27

grayloon

Joined: 06/11/2007

Posts: 11

Re: JS Validating Multiple Instances

I'm really surprised that no one has responded. This seems like a very basic need that most users would encounter.

Sat, 10/18/2008 - 00:06

sferrino

Joined: 17/10/2008

Posts: 1

Re: JS Validating Multiple Instances

I just had a similar issue with two editors on one page. I don't know if you have Firebug for Firefox installed, but it allows you to see the instances that are created. I found that by loading one editor right after the other just as you have in your first part of code, even though it displays on the webpage it doesn't create an actual instance of the second one, and so on. So calling it with the GetInstance() is basically calling nothing.

What I did for my situation was use the onComplete command to do something like this:

var oFCKeditor;
var oFCKeditorB;
var loadedB = false;

window.onload = function() {
   oFCKeditor = new FCKeditor('description','780', '325', 'Default' ) ;
   oFCKeditor.BasePath   = "/fckeditor/";
   oFCKeditor.ReplaceTextarea();
}

function FCKeditor_OnComplete( editorInstance ) {

   if (!loadedB) { 
      oFCKeditorB = new FCKeditor('itinerary','780', '325', 'Default' ) ;
      oFCKeditorB.BasePath   = "/fckeditor/";
      oFCKeditorB.ReplaceTextarea();
      loadedB = true;
   }
}

Which completely fixed my problem. Without the loadedB test it would just continue to load instances onto the page.

I would also name your separate instances differently, I don't know if it is mandated, or if it will keep it from working as I haven't tested it, but is just better practice.

Mon, 10/20/2008 - 14:50

grayloon

Joined: 06/11/2007

Posts: 11

Re: JS Validating Multiple Instances

Thanks!

Thu, 12/04/2008 - 01:38

waveform

Joined: 03/12/2008

Posts: 12

Re: JS Validating Multiple Instances

Thanks for this!! Which I'd found this thread sooner.. I posted another solution, after wracking my brain for hours.

viewtopic.php?f=6&t=12269&p=32148&hilit=+firefox+multiple#p32155

I'm new to FCK, so didn't know about OnComplete until I saw this thread. Much more elegant than my workaround!

Tue, 01/20/2009 - 22:32

shanek

Joined: 20/01/2009

Posts: 1

Re: JS Validating Multiple Instances

sferrino, thanks for getting me started with that FCKeditor_OnComplete. This was driving me crazy.

Right now, I'm working on a news item page that will have 0-10 entries being displayed on the page. The administrator doesn't know anything about HTML, and I wanted to have a FCKEditor instance available for each news item. The trouble is, I don' t know ahead of time what the news items' IDs will be and how many of them will be there ahead of time, so I can't go hard coding in anything.

The solution for me was to make a textarea with the class "replace_w_fck" every time I looped through the database results (using PHP) plus one for new entries. When the page loads, the script creates an array of all the textareas that are members of the replace_w_fck class.

    function initializeFCK () {
        if (textareas.length > 0) {
            var ta = textareas.shift();
            // initialize FCKEditor
            var oFCKeditor = new FCKeditor(ta.id);
            oFCKeditor.BasePath = "/fckeditor/";
            oFCKeditor.Config["CustomConfigurationsPath"] = "/editorconfig.js";
            oFCKeditor.ToolbarSet = "simpleToolbar";
            oFCKeditor.ReplaceTextarea(ta.id);
        }
    }

    function FCKeditor_OnComplete(editorInstance) {
        initializeFCK();
    }

    var textareas;
    window.onload = function() {
        // I'm using the prototype framework, so getting an array of elements 
        // that are members of the replace_w_fck class is really easy
        // if you're not using a framework with utility functions like this, (the $$() function in this case)
        // you can come up with your own method of looping through your page
        textareas = $$('.replace_w_fck');
        initializeFCK();
    }