IT SOLUTIONS
Your full service technology partner! 
-Collapse +Expand
JavaScript
Search JavaScript Group:

Advanced
-Collapse +Expand JavaScript Store

Prestwood eMagazine

March Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite Scri...JavaScript a...Beginners Co...   Print This     
  From the October 2015 Issue of Prestwood eMag
 
JavaScript Beginners Corner:
Validating Form Fields
 
Posted 11 years ago on 3/2/2008 and updated 7/6/2008
Take Away: Adding JavaScript to your HTML forms to validate form fields.

KB100908



Getting Started

If you are brand new tothe JavaScript event model, you might wish to read our introduction to the JavaScript event model tutorial:


Checking if a field is blank

For this example we'll use the document object model to check a checkbox.

Key Points

  • Name the form (in this first example, we named the form Example1. You do this so you can use dot notation to refer to "theForm.theField.value".
  • Text objects have value property you can use to check.
  • You can add an onClick JavaScript event to the form. In this case, we used the event to call a function.

Here's the function code :

function CheckFieldBlank() {
if (Example1.Field1.value == ""){
alert("It's Blank!");
} else { alert("It's not blank.");
};

Here's the form code:

<form method="Post" name="Example1">
<input type="text" name="Field1" size="20"> 
<input type="button" value="Check If Blank" 
  onclick="CheckFieldBlank();">
</form>

Checking if a field has a specific value

One more example. This example show how to check for a specific value. In this case we check for the value 'Mike' in the field.

Here's the function:

function CheckFieldMike() {
if (Example2.Field1.value == "Mike"){
alert("It's Mike!");
} else { alert("It's not Mike.");
};

Here's the form code:

<form method="Post" name="Example2">
<input type="text" name="Field1" size="20"> 
<input type="button" 
value="Check If Blank" onclick="CheckFieldMike();">
</form>

Here's the working sample:

  • [Load Demo] - Remember, you can view the source of browser-side JavaScript.

What's Next

Now that you know how to add JavaScript to your HTML pages and a bit about the JavaScript event model, it's time to explore the various capabilities of JavaScript. Try adding a few scripts to your HTML pages fromt his website. As you do, study in detail each script you add to your pages.


Comments

0 Comments.
Share a thought or comment...
 
Write a Comment...
...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.


Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1204A1
Enter key:
Article Contributed By Mike Prestwood:

Mike Prestwood is a drummer, an author, and creator of the PrestwoodBoards online community. He is the President & CEO of Prestwood IT Solutions. Prestwood IT provides Coding, Website, and Computer Tech services. Mike has authored 6 computer books and over 1,200 articles. As a drummer, he maintains play-drums.com and has authored 3 drum books. If you have a project you wish to discuss with Mike, you can send him a private message through his PrestwoodBoards home page or call him 9AM to 4PM PST at 916-726-5675 x205.

Visit Profile

 KB Article #100908 Counter
10784
Since 4/2/2008
-
   Contact Us!
 
Have a question? Need our services? Contact us now.
--Mike Prestwood

Call: 916-726-5675

email: info@prestwood.com


Go ahead!   Use Us! Call: 916-726-5675 


©1995-2019 Prestwood IT Solutions.   [Security & Privacy]