Form validation - Wiley Publishing For Dummies HTML for Dummies, pdf

A common use for JavaScript is to verify that users have filled out all the required fields in a form before the browser actually submits the form to the form-processing program on the Web server. Listing 12-4

stores a form checking function, checkSubmit, in the <script> element of the HTML page, and references it in the form’s onsubmit attribute.

Listing 12-4: Form Validation <html>

<head>

<title>Linking scripts to HTML pages</title> <script language="javascript">

function checkSubmit ( thisForm ) {

if ( thisForm.FirstName.value == ‘’ ) {

alert(‘Please enter your First Name.’); return false;

}

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures

List of Tables List of Listings List of Sidebars

alert(‘Please enter your Last Name.’); return false; } return true; } </script> </head> <body>

<form method="POST" action="/cgi-bin/form_processor.cgi" onsubmit="return checkSubmit(this);">

<p>

First Name: <input type="text" name="FirstName"><br> Last Name: <input type="text" name="LastName"><br> <input type="submit">

</p> </form> </body> </html>

This script performs one of two operations if either form field isn’t filled in when the user clicks the submit button:

It instructs the browser to display a warning (the text is specified in the alert) to let the user know he or she forgot to fill in a field.

It returns a value of false to the browser, which prevents the browser from actually submitting the form to the form processing application.

If the fields are filled in correctly, the browser doesn’t display alerts and returns a value of true, which tells the browser that the form is ready to pass on to the Web server. Figure 12-5 shows how the browser displays the alert if the first name field is empty.

Figure 12-5: A good use of JavaScript is to validate form data.

Tip Although this example only verifies whether users filled out the form fields, you can create more advanced scripts that check for particular data formats (such as @ signs in e-mail addresses and only numbers in phone number fields). JavaScript is a robust Web programming language, so your form