We help IT Professionals succeed at work.

Validating text content entry (InnovaStudio WYSIWYG Editor)

Medium Priority
3,975 Views
Last Modified: 2013-12-16
I've got a form with a texteditor (innova) in it. I'd like to validate using Javascript that some text has been entered. I get a run time error when I try

and read values from the form from within the JS validate routine.

The error is:

A Runtime Error has occurred.
Do you wish to Debug?
Line: 8
Error: 'TheContent.value' is null or not an object

The code is as follows, you need the innova text edit script source, to get the editor to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script SRC='/Editor/scripts/innovaeditor.js' TYPE="text/javascript"></script>
<script TYPE="text/javascript">
function ValidateForm(myForm) {
  if (myForm.TheContent.value=="") {
    alert("Please enter text information");
    return false;
  } else {
    return true;
  }
}
</SCRIPT>
<head>
</head>

<body>
<form action="" method="get" onsubmit="return ValidateForm(this)">
  <table width="75%" border="1">
    <tr>
      <td>Text Info</td>
      <td><textarea id="TheContent" name="TheContent" rows=10 cols=48></textarea>
        <script>
            var oEdit1 = new InnovaEditor("oEdit1");
            /***************************************************
                  ENABLE ASSET MANAGER ADD-ON
            ***************************************************/
            oEdit1.cmdAssetManager = "modalDialogShow('/Editor/assetmanager/assetmanager.asp',640,465)"; //Command to open the Asset Manager add-on.
            oEdit1.css="/sitestyles.css"
                oEdit1.arrStyle = [["BODY",true,"","padding:20px;background-color: white;"]];            
            oEdit1.useDIV=false
                oEdit1.features=["ForeColor","|","Numbering","Bullets","|","Indent","Outdent","Line","Paragraph","FontSize","|","Bold","Italic","Underline"];
            oEdit1.width="100%"
                  oEdit1.REPLACE("TheContent");//Specify the id of the textarea here
      </script></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
  </table>

</form>
</body>
</html>
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004
Commented:
Does:

function ValidateForm(myForm) {
  if( document.getElementById( 'TheContent' ).value == '' ) {
    alert( 'Please enter text information' ) ;
    return false ;
  } else {
    return true ;
  }
}

work?

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Commented:
What Tim wrote should work fine.
You got an error because you referenced an object called "myForm" that does not exists in your code. Your form has no id.
This could work too:

function ValidateForm(myForm) {
  if (document.forms[0].elements["TheContent"].value=="") {
    alert("Please enter text information");
    return false;
  } else {
    return true;
  }
}
CERTIFIED EXPERT
Top Expert 2004

Commented:
>> you referenced an object called "myForm" that does not exists in your code

Isn't it passed as a parameter to the function?
Pravin AsarPrincipal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005

Commented:
I do not see any problem with your Javascript code,  look like a issue with  InnovaEditor(),
I just commented the script line to verify that..

just try following script..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script SRC='/Editor/scripts/innovaeditor.js' TYPE="text/javascript"></script>
<script TYPE="text/javascript">
function ValidateForm(myForm) {
  if (myForm.TheContent.value=="") {
    alert("Please enter text information");
    return false;
  } else {
    return true;
  }
}
</SCRIPT>
<head>
</head>

<body>
<form action="" method="get" onsubmit="return ValidateForm(this)">
  <table width="75%" border="1">
    <tr>
      <td>Text Info</td>
      <td><textarea id="TheContent" name="TheContent" rows=10 cols=48></textarea>
        <script>
          var oEdit1 = new InnovaEditor("oEdit1");
                 oEdit1.REPLACE("TheContent");//Specify the id of the textarea here
     </script></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
  </table>

</form>
</body>
</html>

Commented:
looks i was tired yes ;)

Author

Commented:
Hi Tim

Spot on, works a treat now, thanks for the swift response!

Cheers
Mike
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.