showMessage

Having to mess with forms all the time, I was beginning to go crazy tweeking different messages. One for success, one for failure, one for help, etc.

I decided to try to combine some css with some javascript to make a nice reusable piece to display my form messages. Here is the fruit of that labor.

The function is going to take three arguments. The first argument is a message and or list of messages. The second is the id of the node you would like to stick the message before. The last argument is a classname.

function showMessage(thismessage,location_id,classname){
// first clear showmessage div
if(document.getElementById(“showmessage”)){
var clearerror=document.getElementById(“showmessage”)
clearerror.parentNode.removeChild(clearerror)
}

The first part of the function will check to see if the div “showmessage” exists. If it does then it will remove it from the document.

// create an showmessage div
var location = document.getElementById(location_id);

We define the location so it can be used later. Below we create a new div and set the id attribute to showmessage. We then can style the div for each instance using the className. After that we create an unordered list.

With the list ready, the messages can then be put into an array. We will split the messages up in this example with a pipe “|”.  You can substitute your own delimiter.

var showmessagediv = document.createElement(“div”);
showmessagediv.setAttribute(“id”,“showmessage”);
showmessagediv.className = classname;
var showmessageul = document.createElement(“ul”);
showmessageul.setAttribute(“id”,classname+“list”);
var showmessage = new Array();
showmessage = thismessage.split(“|”);
for(i=0; i
var showmessageli = document.createElement(“li”);
var showmessagelitxt = document.createTextNode(showmessage[i]);
showmessageli.appendChild(showmessagelitxt);
showmessageul.appendChild(showmessageli);
}
showmessagediv.appendChild(showmessageul);
location.parentNode.insertBefore(showmessagediv,location);
// have to add this to display error until css corrected
}

Looping through the array, we create a new list element and insert the message. We append the message to the new list element and then append the list element to the unordered list element. When it is all done then we append the unordered list to the showmessage div. The last step of the function is to insert the new showmessage div right before the location_id.

Attached is the style I used with both the successful messages and the unsuccessfull images.

.errormsg {
clear: both;
display: block;
width: 90%;
color: #FFFFFF;
font-weight: bold;
background-color: #FF9D9D;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #FF0000;
}

.successmsg {
clear: both;
display: block;
width: 90%;
color: #333333;
font-weight: bold;
background-color: #9bc19b;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #039b03;
}

#errormsglist, #successmsglist {
margin-left: 0;
padding-left: 0;
list-style: none;
}

#errormsglist li, #successmsglist li{
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0;
}

#errormsglist li { background-image: url(/icon/exclamation.png); }

#successmsglist li { background-image: url(/icon/accept.png); }

You can modify the CSS and change the class name to what ever you wish. The only think to remember is if you style the list, to append “list” to the style.

showMessage.js
showMessage.css

exclamation.png

accept.png

Setting up a new web site on centOS 5 box

There are so many great tutorials on the web about setting up a Linux box for web hosting, but why not add one more… right? Actually this tutorial is written specifically for a co worker that is not familiar with Linux, so this tutorial is being offered to “assist” him with the migration process. His old hosting company provided him with CPanel and he is reluctant to change, but who in their right mind would pass up hosting at the price of “free ninty-nine”.

Lame Mouse Over Effect

So at work today, I wanted to see if I could create a lame mouse over effect to let feel like they were highlighting a listing. I wanted to pop out the moused over listing on the page by putting a thin border around the moused over div and then change the background. I was able to create the effect with javascript and coldfusion very easily. Because I don’t host this site on a coldfusion server, I will just show the javascript with some rendered HTML.

Form Validation II

Continuing on from the first part of the tutorial, we are going to continue through the list of form elements in the order we setup. Next we work on the email address.

Notice how we handle the email value checking first to see if it is empty to trigger an error and then using the logical operator OR (denoted as ||), we then look at another statement. In that statement we use the logical operator AND (denoted as &&) to trigger an error, and if both the email filed is not empty and the emailfilter.test is not valid then we do what is in between the curly brackets again. The contents are the same as what we described in the first statement.

client side form validation

The more we learn the more fun we have. Take for example the simple process of validating a form. We can save the user a lot of time validating the form on the client side and still do it without those annoying alerts that pop up with a loud DING! It is rather easy with the help of a little javascript.

Now depending on what type of data you are passing to the server with your form, you will often need to also validate your fields data on the server too. This tutorial will only look at the client side validation, leaving server side validation to another tutorial at some other time.

Lets first start with our form. We are going to do a simple form that just asks for name, email address, optional phone number, a select list for subject and text area for message. Oh, I always forget, we need a submit and clear button too. Lets start it all of with our form tag.