Look Ma! No submit button!
<lisp>The submit buttons must be purple and do that faaaabulous image swapping thingy like the navigation!</lisp>
submit() method. Too bad that's not the solution.
ENTER key on the keyboard when the cursor is in the Zip Code field. See what I mean.
That's not how you validate a form?
onsubmit event handler of the
<form> tag or the
onclick event handler of a non-graphical submit button to call a function that returns a boolean of
So what's the solution?
Taming the dropdown menu
onsubmit event handler so this will work with the most browsers possible (Some browsers <cough>Netscape Navigator 4.x</cough> don't support onclick event handlers on graphical submit buttons). You'll also need to reference a server-side script in the
<cfparam name="form.navigateSelect" default="/"> <cflocation url="#form.navigateSelect#" addtoken="No">
<noscript> tags. See Listing 3 below for an example of the HTML.
<form action="navigate.cfm" method="post" onsubmit="return navigateForm(this.form.navigateSelect)"> <select name="navigateSelect" id="navigateSelect" size="1"> <option value="">Choose One</option> <option value="/">Home</option> <option value="/products/">Products</option> <option value="/faq/">FAQ</option> <option value="/about_us/">About Us</option> <option value="/contact_us/">Contact Us</option> </select> <noscript> <input type="submit" value="Go" /> </noscript> </form>
<noscript> tags and attempt to display anything contained within them. As the only browser this really affects is Netscape Navigator 2.x, you're not likely to experience this problem.]
Appeasing The Demanding Designer
So how do we remedy this situation so it's usable by all visitors to our site? Simple — remove the
<a> tag and use an image submit button instead of a regular image. We'll also move the
onmouseout event handlers to the image submit. Most (like 95+%) of the browsers that will be visiting your site will support these event handlers on the image submit. Those that don't will simply get a normal, "boring" image submit button. See Listing 5 below to see what the code in Listing 4 looks like after this conversion.
<form action="/login.cfm" name="loginForm" method="post"> <input type="text" name="username" value="" /><br /> <input type="password" name="password" value="" /><br /> <input type="image" src="images/login_off.gif" width="88" height="31" border="0" alt="Login" onmouseover="rollOver('loginButton', 'on')" onmouseout="rollOver('loginButton', 'off')"> </form>
"Are you an idiot? Tell me you didn't just put that there." or Validating Form Data
submit() method. So, what exactly is the right way?
onsubmit event handler to your
<form> tag. Since this event is cancellable, we preface our validation function call with a
return statement. The validation function will return a boolean value of true or false finishing off this
return statement. A
return true statement will result in the default behavior — the form submitting. Conversely, a
return false statement will result in the form submission being aborted. See Listing 6 below for an example of how the function in the
onsubmit event handler is called.
Let's take a look at our form validation function —
validateForm() — to see how it works. Before we do though, it'd be a good idea to see the form we'll be working with. For simplicity, we'll be validating a simple login form with
password fields. See Listing 7 below for the HTML for this login form.
<form action="/login.cfm" name="loginForm" method="post" onsubmit="return validateForm(this)" > <label for="username" ><u>U</u>sername</label> <input type="text" name="username" id="username" tabindex="1" accesskey="u" value="" /><br /> <label for="password" ><u>P</u>assword</label> <input type="password" name="password" id="password" tabindex="2" accesskey="p" value="" /><br /> <input type="submit" tabindex="3" accesskey="l" value="Login" /> </form>
When the user submits the form our
validateForm() function is called (Follow along with the code in Listing 8 below). The function creates a couple of variables local to the function that it'll use for storing the return value (
returnValue), the concatenated error message (
errorMessage), and which field needs to receive focus if the form doesn't validate (
focusField). Then the function checks the username and password fields for values. If either field is blank, it adds some text to the
errorMessage variable, sets the
focusField variable to the current field if it hasn't been set yet, and changes the
returnValue variable to false. If both fields have values then
returnValue keeps its initial value of true. This boolean is then returned to the calling event handler by the
return statement on the last line of our function. The event handler uses this boolean value that comes back from the function in combination with the
return statement just before the function call and allows submission if the boolean is true or halts submission if it is false.