Form Validation

Thu, 21 Sep 2006 09:17:00 -0500

I've been playing with some form validation stuff for CF. I had been usign , but I wanted the HTML interface to act a bit more like the Flash interface, but I don't really want to use Flash. I've also been doing a lot more work with some of the DHTML libraries that AJAX has made popular, so I figured there had to be a relatively elegent way to do form validations with something like Ajaxian about easy form validation and decided to give it a try. The article on Dexagogo shows how they created a library to handle form-validations that doesn't require any other work than creating a form. This was just what I was looking for! Basically, you just need the latest files from script.aclo.us with the latest prototype version (the 1.5 release candidate is included in the latest script.aculo.us lib folder), and the validation library. Convienently, they're all included in the demo file on the site. To use this, you really only need prototype and the validation library (script.aculo.us adds a nice effect – much like the Flash format in cfform). For me, I made these calls:

This is slightly different than the example on their page; they load the effects.js file directly, I'm calling the library via script.aculo.us with the load parameter. This isn't really a big deal for one library, but it is convenient when you want to use several, but not all, of the libraries (e.g. scriptaculous.js?load=effects,dragdrop,slider). Anyway, to actually use this, you need to create a form with an id attribute:

...

Now, we add some fields and use the class attribute to call the validator:


Name: 

Email:

There are 11 options for use in the validation library (this is directly off their page):

required (not blank)
validate-number (a valid number)
validate-digits (digits only)
validate-alpha (letters only)
validate-alphanum (only letters and numbers)
validate-date (a valid date value)
validate-email (a valid email address)
validate-url (a valid URL)
validate-date-au (a date formatted as; dd/mm/yyyy)
validate-currency-dollar (a valid dollar value)
validate-one-required (At least one textbox/radio element must be selected in a group)

This is really nice, because if you want to allow an optional field, but validate it, you can do:

There's one more piece of the pie...to call the validation library. At the bottom of your page add:

The first argument is the id attribute of the form you're wanting to validate. The second tells the Validator object what to do. This particular example enables validation on each field as you leave it (which I find useful). Some of the other options are:

stopOnFirst (boolean): Stop on the first validation failure; default: false
onSubmit (boolean): Override the default behavior of adding an even listener to the onsubmit event (set to false if you want to make sure your onsubmit method gets called no matter what); default: true
immediate (boolean): validate when the cursor leaves the field; default: false
focusOnError (boolean): place the focus on the first field with an error; default: true
useTitles (boolean): make field validators use form element title attributes as error advice message; default: false
onFormValidate (string function): call a function when the form is validated
onElementValidate (string function): call a function when an element is validated

What I thought was really cool was the ability to add custom validation types via an API. Say you only want folks to use capital letters for their names, you simply add a new validation type like:

Want to add several? You can do that too:

This should be all of the normal items included in (plus a couple extra for good measure). Now the only thing left is to make it look pretty. One of the nice things about the Flash format in is that it color codes required fields with the different halo effects. To obtain a similar effect in the forms, we'll use style sheets instead. This is a rather light stylesheet, but it'll give you something to start with (based on the default haloGreen skin):


 input.required, textarea.required {
	border: 1px solid #ffbf2b;
 }
 input.validation-failed, textarea.validation-failed{
	border: 1px solid #ff3300;
	color: #ff3300;
 }
 input.validation-passed, textarea.validation-passed{
	border: 1px solid #00cc00;
	color: #000;
 }
 .validation-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #FF3300;
	color: #fff;
	font-weight: bold;
}
.custom-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #c8aa00;
	color: #fff;
	font-weight:bold;
}

I made a short example of some of the validations at http://swem.wm.edu/blogs/waynegraham/examples/validation/. I have to say that I've found this to be a bit better solution (at least for my needs) than using !

Getting XML from MSSQL Server

Mon, 21 Aug 2006 11:49:00 -0500

I've been playing with all the AJAX stuff that's been coming out lately. I suppose that like a lot of folks, I was creating a query, then having a generic function that created the XML in a proxy file for the JavaScript (Ray Camden has a really nice function for transforming a query to XML). Last week I was doing some research to find a way to do some XML searching and stumbled upon the FOR XML statement. I knew that most RDBMSs were capable of dealing with XML record sets, but it's been years since I've even looked at any of the XML stuff for MSSQL. The FOR XML statement returns a query result and transforms rows into XML elements. There are three arguments that this can take:

RAW: Transforms each row into an element with a generic identifier (<row/>) as the element tag.
AUTO: Returns the results in a simple nested XML tree
EXPLICIT: Allows you to define the XML tree returned

[More]

Wayne Graham's Blog - AJAX

Form Validation

Getting XML from MSSQL Server