Code and Webdesigns Website

In part one I showed how to use HTML to build a contact page using division tags and tables. I will today show you how to use JavaScript to validate the information on your contact page. Validating makes sure the boxes on your contact page has the required information in them. Also you want to make sure your phone numbers are actually numbers not letters and visa versa.  JavaScript is a little more complicated that HTML. It actually works inside of HTML and cooperates with CSS.  You can use functions with JavaScript. A function in a programming language such as JavaScript is a piece of code that performs a task and just sits there until it is called upon. So I used the following functions which will be called upon when the boxes are filled in. Here are the functions I used.

<script type=”text/javascript”>
/* <![CDATA[ */

function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert("You must enter a numeric value!");
return false;
}
}
function confirmSubmit(){
if (document.forms[0].first_name.value==”"
||document.forms[0].last_name.value==”"
||document.forms[0].address.value==”"
||document.forms[0].city.value==”"
||document.forms[0].state.value==”"
||document.forms[0].zip.value==”"){
window.alert(“You have forgotten to enter some contact information.”);
return false;
}

else if (document.forms[0].area.value==”"
||document.forms[0].exchange.value==”"
||document.forms[0].phone.value==”") {
window.alert(“You must enter your telephone information.”);
return false;
}
else if (document.forms[0].email.value==”"){
window.alert(“You must enter an email address!”);
return false;
}
var contactSelected = false;
for (var i=0; i<3; ++i) {
if (document.forms[0].contact[i].checked == true){
contactSelected = true;
break;
}
}
if (contactSelected != true){
window.alert(“You must select a method to be contacted.”);
return false;
}

var servicesSelected = false;
for (var i=0; i<5; ++i){
if (document.forms[0].services[i].checked == true){
servicesSelected = true;
break;
}
}
if (servicesSelected == false) {
window.alert(“You must select at least one service!”);
return servicesSelected;
}
else
return servicesSelected;

return true;
}

function confirmReset(){
var resetForm = window.confirm(“Are you sure you want to reset the form?”);
if (resetForm == true)
return true;
return false;

}
/* ]]> */
</script>

First we must open up the function section of the program with a opening JavaScript tag. With JavaScript if you place the code in the head it will be able to operate as the page is loading. Since we are using functions which will not operate until the call comes we can place the functions in the head.

The first function is to see if numbers are in the fields where the numbersw should be, if someone tries to enter something besides numbers a warning message will print out.

The next function activates whenever the submit button is clicked and confirms if the required fields are filled in or not. And if the information is not there the function will return false and activate the window. alert and print out the above message

Next we have two else if statements mainly saying if the code ran properly because the contact information is correct, the program goes on to see if the telephone information is filled out correctly.

Next we have a for statement and if statement which looks to see if the way to be contacted has been selected or not.  If it is filled out correctly the code will let off here notice the break statement. If it is not selected an alert will print which tells the person they must select a method way to be contacted.

The last part of the function checks to see if the desired service is selected or not, if it is the program goes on. If it is not filled out correctly the program will print out a warning.

The last function confirmReset will make sure you want to reset the form if you were to hit the reset button. Then we have the closing JavaScript tag.

Now as I said before a function will just sit there and do nothing until it activated or called. So at this time we will see what calls or activates these functions. I place the function call to make sure the required information in the form is where it should be and the call for the reset in the form load or form action section of the program. Both which will be called when the submit and reset button are clicked.

<form action=”conprocess.php” method=”post” enctype=”application/x-www-form-urlencoded” onsubmit=”return confirmSubmit();” onreset=”return confirmReset();” >
 

The first call I placed in the program is in the zip code field I want to make sure it is all numbers so this how you do you fulfill that job. What we are saying is if anything in this field changes go to the checkForNumber function and make sure what is in this field (in bold).

Zip<span>*</span>
<input type=”text” name=”zip” size=”10″ maxlength=”10″  onchange=”return checkForNumber(this.value);” /> </p>

As you can see I did the same in the telephone section.

<p>Telephone <span>*</span>
<input type=”text” name=”area” size=”3″ maxlength=”3″ onchange=”return checkForNumber(this.value);” />
<input type=”text” name=”exchange” size=”3″ maxlength=”3″ onchange=”return checkForNumber(this.value);” />
<input type=”text” name=”phone” size=”4″ maxlength=”4″ onchange=”return checkForNumber(this.value);”  /></p>

Well this is a simple example of how to validate information on a contact page using JavaScript, but since JavaScript is what is called a client side programming language I will be showing the next in the next post how to use PHP  on the server side to validate your information. I suggest you always use both client side validation and server side validation when you create an contact form. I hope you have enjoyed this tutorial and that it helps you in your webdesigns. Later Codin

What is Code and Webdesigns? Code and Webdesigns is my programming and website designing business. My name is Earl Gile and I just finished my associate’s degree in computer programming and web administration. My desire for this blog is to share what I am learning in my never-ending journey to become the best programmer and web designer I can become. I have been work with websites since 2003, but I felt I was not learning what I needed to know so I went to college. Once I was at college I learned to enjoy programming also, so I branch out into programming as well. I learned some programming languages I may never of known about had I not gone to college such as javascript , or java, mysql and other languages. I thought I could just visit sites that have tutorials on webdesign and learn to be web designer. I admit there are sites with tutorials on web design where I did learn and I still visit them from time to time yet today if I get stuck on a problem I can not resolve. I have even watched tutorials on YouTube to resolve programming and web design problems I have ran into.  So you definitely  learn on different sites with tutorials, and where would we all be without programming and web design forums.  But I felt I could get a better education for my goals as a website designer at college. I also buy books on different programming languages and website design to help me grow. I plan to share different tutorials and thoughts on programming and website design as we go along. I hope you enjoy everything you find here.