homepage Welcome to WebmasterWorld Guest from 54.211.7.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JavaScript JumpStart #1 - form validation
part 1
korkus2000




msg:1482722
 12:47 pm on May 28, 2003 (gmt 0)

JavaScript JumpStart - Part 1
Form Validation

With so many people using copy and paste scripts these days, people are not learning JavaScript. Programs like Dreamweaver, Frontpage, and GoLive have made the need to learn simple JavaScript not as necessary. The problem with this is when people need to have some custom functionality, they are overwhelmed. I think it is important for all web developers to at least understand the basics.

For the first installment of JavaScript JumpStart, I want to discuss form validation. It is one of the most used and helpful functions of JavaScript.

A lot of the form validation processing load has been moved to server-side technologies. It is better to scrub strings and values on the server-side to stop an application from breaking. Most web applications will process all inputs on the server-side.

So why do we need to use JavaScript for validation? Javascript is processed client-side in the browser. That means you don't have to request a new page or program from the server, run it, and send a new page down. You save time in the round trip by fixing problems on the page immediately. Using JavaScript in tandem with server-side processing can speed up your users time with forms and make a much more enjoyable experience. Since feedback from users is one of the most important aspects of many sites, JavaScript can make a user complete a form instead of abandoning the process.

The Document Object
To start out we need to look at the Document Object. The Document Object is basically the web page. Everything in a web page is a part of the Document Object. Forms, images, text, and the like are all in the Document Object. All of the properties for forms, images and text are found in the Document Object in JavaScript.

Many have seen document.write(). This is a call to the write method (A method is a function built into the object) of the Document Object. So document.write("Hello World") would print Hello World to the web page.

You can see from document.write("Hello World") that when dealing with objects in JavaScript that you use . to access methods and properties. This is how you target elements in the Document Object or web page. Here is a simple page with a text box:

[color=0000ff]<html>
<head>
<title>Example 1</title>
</head>
<body>
<input type="text" name="textbox1" value="JavaScript JumpStart">
</body>
</html>[/color]

To access the value property of the text box we must build a road map for JavaScript to follow. We start out with document since the text box is an element in the Document Object. Then we add a dot to tell JavaScript that the element is a subset of the Document Object. Next we add the name of the text box, using the value in the name attribute of the tag (This is a simple example so I will leave out the ID attribute), to target it. Then we add another dot to say the property is a subset of textbox1. Then we add the property we want to access which is the value. So it looks like this:

[color=0000ff]document.textbox1.value[/color]

Now JavaScript knows what we want. document.textbox1.value will hold the value of what ever we have currently in the text box. When the sample page loads JavaScript JumpStart will be the value since it is in the value attribute of the text box. If you wrote Hello World in the text box, then document.textbox1.value = Hello World. So each time the text in textbox1 changes the document.textbox1.value will update to the current text in the text box.

Alert Method
We have been talking about the Document Object, but we need to look at a method of the Window Object. The Window Object is the browser container itself. The status bar, location bar, scrollbars, and other container features are in the Window Object. One method of the Window Object is the alert method. The alert method invokes a modal box (A modal box is a panel that is on top of the application and prevents the user from doing anything else in the application until a response is given to the panel). The alert box has text information you supply and an OK button. Here is a sample alert method call:

[color=0000ff]alert("JavaScript JumpStart");[/color]

This will pop up the alert box with the text "JavaScript JumpStart". You will not be able to do anything with the browser until you click the "OK" button on the alert box. If we used the textbox1 reference above in the alert we would see the current value of textbox1:

[color=0000ff]alert(document.textbox1.value);[/color]

This will give us the current value of the text box. Notice that there are not any quotes around document.textbox1.value. document.textbox1.value is an object reference and should not be in quotes. Quotes tell JavaScript that you want text contained within. If you used alert("document.textbox1.value"); your alert box would read "document.textbox1.value" instead of the value of the text box. With object references you want what the text represents. So for variables and object references don't use quotes.

if Statement
We also need to look at one of JavaScript's conditional statements. It is called an if statement. An if statement tests to see if an expression is true or false. If it is true then it will run some code. If it is false it will do nothing.

[color=0000ff]if(1<2){
alert("This expression was true");
}[/color]

Since we know 1 is less than 2 we will see the alert box when it is run. If we were to change the 1 to a 3, then we would not see an alert box because the expression is false and the alert code is not run.

So lets look at the construction of the if statement. It starts off with a lowercase if. The you have paranthasis that encapsulate the expression being tested. Then you start the code block with an open curly bracket({). Then you write the code that needs to execute if the expression is true. Then close the code block with a closing curly bracket(}).

if...else Statement
So what happens if you want to make something happen if the expression is false? Then you would use an if...else statement. It looks like this:

[color=0000ff]if(1<2){
alert("This expression was true");
}else{
alert("This expression was false");
}[/color]

We basically take the original if statement and add else{ and a code block for a false expression then a closing }. Now no matter if the expression is true or false you can run JavaScript code to handle it.

onSubmit Event Handler
JavaScript is an event based language. That means when an event like a mouse over or when the page finishes loading, JavaScript can be told to run code. The most common is the onLoad event handler. This fires when the web page is done rendering in the browser. You most likely have seen this when you go to a site and when the page is done you get a pop-up advertisement.

There are many event handlers you can use. For this tutorial we are going to use the onSubmit event handler. This fires when a form is submitted. It halts the submit until the form receive a signal from the function being called that it is OK to proceed. It is told this by sending a return true back to the form. Here is an example of the onSubmit event handler in a form:

[color=0000ff]<form name="form1" method="post" action="processingcode.cgi" onSubmit="return validateMe()">
<input type="text" name="textbox1" value="JavaScript JumpStart">
<input type="submit" name="submit">
</form>[/color]

It is placed in the form tag. Notice the keyword return next to the validateMe() function call. This tells JavaScript that you want a value back. Let say you want to allow people to submit the form only if they change the text in textbox1. The value can either be true or false. So lets look at what the validateMe() function looks like:

[color=0000ff]<script language="JavaScript" type="text/javascript">
function validateMe(){
if (document.form1.textbox1.value == "JavaScript JumpStart") {
alert("You have not change the text");
return false;
}else{
return true;
}
}
</script>[/color]

As you can see we put the JavaScript code in <script></script> tags. We started the function with the word "function" and the function name validateMe(). We use a { to encapsulate the function and will close it at the end. Then we use an if...else statement to test the value of textbox1 to see if the value has changed.

You will notice that we have added the form name form1 after the document and before the text box name. This is because the form is before the text box in the Document Object. In our earlier example we didn't have a form tag so we didn't need a form name. We have one now so we must add it to let JavaScript find the text box value.

You will also noticed we used 2 equal signs or ==. This is an operator in JavaScript that compares 2 values. If we only used 1 equals we would be telling the code to make document.form1.textbox1.value equal "JavaScript JumpStart". We don't want that. We want to see if these two values are the same so we use ==.

If we didn't change the text box and the value is still "JavaScript JumpStart" then we pop up an alert box that says "You have not change the text" and return the value of false once the OK button is clicked on the alert box. return false sends false to the form and prevents it from submitting. If we did change the text box then we just return true back to the form and allow it to continue to send the form to a processing location.

For the next installment we will look at different form elements and more complicated validation functions.

 

tedster




msg:1482723
 5:14 am on May 29, 2003 (gmt 0)

I've got a question about form validation - specifically email address input. I've seen two approaches:

1. test the input to ensure that there's an "@" character and maybe a "." This catches AOL'ers who forget that their screen name alone doesn't cut it on the "outside"

2. require a double entry of the email address, and then show an alert if the two don't match.

Obviously #2 stands a much better chance of catching typos. But doesn't it also cut down on the number of people responding by adding extra work?

What kinds of validation for form data do people find the most practical and important? Anything in particular that gets sticky?

mat




msg:1482724
 6:19 am on May 29, 2003 (gmt 0)

Thanks a lot for this - have flagged the post. A clear description of the naming hierachy and associated syntax is something I could have done with about two months ago, but c'est la vie.

korkus2000




msg:1482725
 1:04 pm on Jun 9, 2003 (gmt 0)

Form Validation - Part 2 [webmasterworld.com]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved