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

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.

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

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>

Select allOpen 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.

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>

Select allOpen 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

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>

Select allOpen 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

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