Solved

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

Posted on 2014-04-19
7
466 Views
Last Modified: 2014-04-22
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
0
Comment
Question by:Eric Bourland
  • 4
  • 3
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40010422
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40010430
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40010449
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 3

Author Comment

by:Eric Bourland
ID: 40010487
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40010613
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40010771
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
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 40014556
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now