Third Post

3333 33333 3333 nt montes, nascetur ridiculus mus. In justo neque, pharetra nec elementum quis, facilisis quis erat. In egestas, tortor ut rhoncus facilisis, metus mauris porttitor felis, sit amet adipiscing dolor enim in elit. Nulla facilisi. Suspendisse potenti. Ut vel sapien orci. Proin eget magna nec sapien laoreet bibendum eu eget orci. Integer at turpis nibh, quis tempus tellus. Donec id nulla a justo mollis varius et vel tellus. Donec sem neque, viverra a dignissim

Second Post

nt montes, nascetur ridiculus mus. In justo neque, pharetra nec elementum quis, facilisis quis erat. In egestas, tortor ut rhoncus facilisis, metus mauris porttitor felis, sit amet adipiscing dolor enim in elit. Nulla facilisi. Suspendisse potenti. Ut vel sapien orci. Proin eget magna nec sapien laoreet bibendum eu eget orci. Integer at turpis nibh, quis tempus tellus. Donec id nulla a justo mollis varius et vel tellus. Donec sem neque, viverra a dignissim

3 Rules for Validating Forms

Despite its simplicity, proper form validation has become a lost art. The biggest pitfall web developers fall into when doing form validation is attempting to recreate functionality that already exists in the browser. This article will show how to properly validate a web form submission with JavaScript.

Rule #1: Always validate a <FORM> using an onsubmit() listener.

Question: What are all the ways a user can submit a form?

1. Clicking on a form's "submit" button.
2. Pressing "enter" while the cursor is in a text field on the form.
3. Shifting focus to the form's submit button and pressing the space bar.

The above list is incomplete.  Consider the multitude of web browsers and browser variants, such as mobile browsers. There are many ways a form can be submitted that we haven't even thought of.  If only web browsers provided some way of notifying developers that a form was submitted we wouldn't have to attempt to capture every conceivable action that the user could use to submit the form. Alas, there is a notification, the form's onsubmit() listener.

However, simply using an onsubmit() listener is not enough, there is something else that developers must do to ensure onsubmit() is properly called.

Rule #2: Always use the <INPUT type="submit"> button to represent the submit button

Too many times I've seen developers emulate the submit button using a <A>, <SPAN>, or <DIV> element. The emulated button has an onclick() listener that handles form validation and ends with form.submit(). The biggest problem with this approach is that it only works when the user clicks on the button! As described earlier, there are many ways to submit a form. The developer is now stuck trying to add an event listener for every conceivable way a user could submit the form in order to ensure the validation code is called. For example, because the validation function is only called when the link is clicked on, form validation doesn't occur when the user presses the enter key on a text field yet the form will still be submitted. When the developer realizes the problem they will add more JavaScript to the form that calls the validation function whenever the user presses the Enter key which ends up compounding the problem. In other words, the developer is recreating functionality that the browser already has. The problem could have been avoided if only the developer would have simply used a proper submit button and validated the form with an onsubmit() listener.

Rule #3: Don't use submit().

There is only one good reason to ever call a form's submit() method and unless you know what it is then you have no need to call it. The main problem with calling a form's submit() method is that it bypasses the onsubmit() listener.  If you aren't suppose to call submit() then how does a web developer control when a form gets submitted?  It's as simple as returning a Boolean value of true from you the onsubmit() listener (i.e. the validation function).  Conversely, preventing the submission of a form is as simple as returning a value of false from the onsubmit() listener.

The following example shows how easy it is to follow these rules and to validate a form when it is submitted:

    Name:
    Phone:
    

Sed vehicula vestibulum ante et rhoncus. Morbi eu erat vitae justo iaculis ullamcorper non eu tellus. In at lacus in velit aliquet sollicitudin vitae eu lacus.