CSS question: "required" asterisk (background image) does not appear in textarea

Hi. I am still having some CSS problems with a form field -- this time it is with the textarea. Please take a look here:

http://test2.ebwebwork.com/editNewsTest.cfm

The text input fields work correct; but the textarea does not display a border (red for invalid; green for valid); and there is not an "asterisk" background positioned in the textarea.

The textarea should look like the one on this page:

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/214_html5_form_validation/tutorial/images/finished_form.png"

I have been working on this one for a while. Time to ask for help. =) What am I missing?

Thank you again for your advice.

Eric
LVL 3
Eric BourlandAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Here is a simple way to test if a word is in TinyMCE.  If the word exists, a div above will light up.  The test word here is 'red'.  I can only get you this far as my RegEx is not so great.  For more details on what exactly to put in your regular expression, I would start a new question.
This is the sample live http://jsbin.com/pacop/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    .red{color:red;}
    </style>
<script src="http://code.jquery.com/jquery-git1.js"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
 <script>
tinymce.init({
    selector: "textarea",
   plugins: "save",
    toolbar: "save",
    save_enablewhendirty: true,
    save_onsavecallback: function() {

    var regex=new RegExp("red");
var testArea=tinyMCE.activeEditor.getContent();
//console.log(regex.test(testArea));
      if (regex.test(testArea)){
         $('.content_message').html('<p class="red">You may not enter RED</p>');
      }

 }

});
</script>
   <script>

</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="content_message"></div>
<form method="post" action="somepage">
    <textarea id="content1" class="content" name="content"></textarea>
</form>
</body>
</html>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Looking at the console there are some files not loading.  However, I don't think that will do the trick.  TinyMCE styles are set from the js loading.  I think you are better off placing a message div above the tinymce container and having your error message there.

Failed to load resource: the server responded with a status of 404 (Not Found) http://test2.ebwebwork.com/CFIDE/scripts/cfform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://test2.ebwebwork.com/CFIDE/scripts/masks.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ebwebwork.com/admin/tiny.css
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
0
 
Eric BourlandAuthor Commented:
Scott, I understand.

I am wondering where / why  / how I am calling the files from CFIDE. The main idea behind using CSS3 client-side form validation is to NOT use the ColdFusion scripts contained in CFIDE. Hmmmm? To research....

I see what you mean, in the console.

I will try:

1) moving the notification message to a DIV above the textarea
2) figuring out how to not call the CFIDE files

I'll get back to you in a little while. Thank you very much! This is really helpful.

Eric
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I'm not a CF developer so I can't help you in detail.  To answer these questions...  

>how I am calling the files from CFIDE

>The main idea behind using CSS3 client-side form validation is to NOT use the ColdFusion scripts contained in CFIDE

Assuming CFIDE is a call to the server, you have to keep in mind that no matter what language you are using, what happens on the server side of things does not interact with what happens on the client side.  

When you have a cold fusion  call in your code like below.  The page loads in this order:
1) The cold fusion server generates the text "Hello World".
2) The page loads after all serverside CF is complete with "HELLO WORLD" inside the div.
3) Once the page is completely loaded, any javascript/jquery (client side) is run. In this sample, we are adding the class, "red" to all div's.  After the page loads, the text will be red when the text is inside a div.
<style>
.red{color:red;}
</style>
<script>
$(function() {
$('div').addClass('red');
});
</script>
<h1>This is a test</h1>
<div>
<cfoutput>#ucase("hello world")#</cfoutput>
</div>

Open in new window

Your form validation is working client side (javascript)/css3/h5ml5 whatever you want to call it.  This is a very important concept to understand because this method only prevents extra trips to the server. The client side validation helps to quickly show an error by a fat finger or not formatting an email correctly. You can not rely on client side validation  alone.  You still have to validate and scrub your data on the server side before you update your db, hit a web service etc.
0
 
Eric BourlandAuthor Commented:
Hi, Scott,

Thanks for these notes. I take them seriously.

I have been using the CFIDE -- ColdFusion Integrated Development Environment -- only for its library of scripts, some of which were useful to include some client-side form validation. I've decided to try other means of client-side validation. I do have some server side validation too -- though server side validation is definitely something I am going to revisit before I move this current page to production.

Some notes on CFIDE if you are possibly interested =)   ----

http://www.raymondcamden.com/index.cfm/2005/11/8/Ask-a-Jedi-Whats-up-with-CFIDE-And-some-cool-Allaire-history-to-boot

Probably the most useful scrubbing of data that is done in this form is ColdFusion's CFQUERYPARAM tag, which I use to control the kinds of data that can be sent to the server from the form. Example:
<!--- query to insert new user record into #REQUEST.NewsTable# --->
			<cfquery name="InsertRecord" datasource="#application.datasource#" result="newPage">
				 INSERT INTO #REQUEST.NewsTable#
     					(
                        newsTitle,
			            NewsDate,
                        newsAuthor,
                        newsContent,
                        newsExcerpt,
                        newsDateCreated
                        )
			     VALUES(
                    <cfqueryparam cfsqltype="cf_sql_varchar"  value="#Trim(Left(form.newsTitle,255))#">,
                    <cfqueryparam cfsqltype="cf_sql_date"  value="#createODBCdate(Trim(form.NewsDate))#">,
                    <cfqueryparam cfsqltype="cf_sql_varchar"  value="#Trim(Left(form.newsAuthor,128))#">,
                    <cfqueryparam cfsqltype="cf_sql_varchar"  value="#Trim(form.newsContent)#">,
                    <cfqueryparam cfsqltype="cf_sql_varchar"  value="#Trim(form.newsExcerpt)#">,
                    <cfqueryparam cfsqltype="cf_sql_timestamp" value="#now()#">
                         )         
					</cfquery>

Open in new window


And I am working on other server-side validation methods before I move this application to production.

For now, I got rid of the CFIDE calls; I am working on moving the validation message to appear above the textarea in a DIV, per your idea.

I'll keep working on this today.

I really appreciate your time and good advice.

Eric
0
 
Eric BourlandAuthor Commented:
Dear Scott,

I am having some trouble moving the notification message to a DIV above the textarea. I am not sure how to go about doing that. Your example makes sense to me:

<style>
.red{color:red;}
</style>
<script>
$(function() {
$('div').addClass('red');
});
</script>
<h1>This is a test</h1>
<div>
<cfoutput>#ucase("hello world")#</cfoutput>
</div>

Open in new window


But I am not sure how to apply that example to the CSS I am currently working with.

Thank you again for your time. I really appreciate your help.

Eric
0
 
Eric BourlandAuthor Commented:
Hi, Scott,

This is making more sense to me now. I'm going to work with it some more, but I get the concept. Thank you again for your help. Hope you are well.

Eric
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.