Handling the new input types that Web Forms 2 defines may be tricky, due to limitations on how browsers support custom type attributes. See the comments at the top of the web forms plugin (linked in section 8) and also see the comments in jQuery's implementation of $.attr().

I like the drafts for the password meter visuals. If somebody could extract the necessary graphics, I'd add them to the current validation-password-meter.

Same for the warning-icon, haven't yet seen that anywhere.

From Rich Caloggero:

How to discover errors in form submissions is a tricky issue for screen
reader users.

I think the best approach might be to:
1. do as Scott suggests and place a summary of the error(s) at the top of
the form or page (using an HTML heading or aria header role so screen reader
users can find it easily).
Might even be useful, especially in formw with many fields, to place a list
of pointers to the invalid fields just after the error message at the top of
the form.

I believe there is an aria-invalid state that should go on the field itself.
See the following blog entry for a bare-bones implementation which actually
works well for screen reader users right now:
http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/

It uses a combination of aria-invalid and role:alert to give a message to
the user when the form element loses focus. The aria-invalid on the field
itself causes the screen reader to issue a message when theat field gains
focus.

Just wanted to chime in with something I found the other day. Currently we use a very basic inline validation/notification method. A small div is displayed on the page with the elements which need to be corrected, and corresponding messages. The visual design proposed looks great, and would be outstanding for an inline approach. However, for working with forms on existing applications, which cant nessesarily be redesigned to support inline validation messages, something like this (http://mootools.floor.ch/en/demos/formcheck/post-comment/) would be ideal.

While this certainly isnt everyone's cup of tea, it's ideal for an application im working on, and I'll be porting this to jQuery within the next week or two. I think this kind of an option, for the 'bubble notifications', would be a value-add feature for the validation plugin.

I wanted to add my little effort as this is something that I really think is important especially if I am going to keep using UI for our CMS admin GUI framework.

http://www.800px.com/ui-input/

I have designed a basic html structure for an input element that can display and validate against a type. this is no where near as advanced as the example plugins but the html is sound and the CSS seems to work and be unobtrusive to the overall document formating.

I have included the proposed UI CSS framework classes for form inputs but have also used existing UI CSS classes to enable the fields to fit in in some way with the overall UI look and feel.

I would like to push this further to implement the webforms 2.0 validation API and see no reason why the example password strength meter cannot be included as well. I would value feedback on the effort so far and whether I am pushing in the right direction for this validation framework.

Hi Matt - This is looking really slick, nice work. I especially like how the validation message fades in and out in the last few examples. The examples where the validation messages obscures the imput might be a usability issue though. If you want to take a crack at the password strength element, that would be a nice addition. I thought there was a jQuery based version out ont eh web already but the links to it seem broken. It might be good to continue working on this script on your own since it's not a high priority for the team right now. Just keep everyone updated on your progress here by posting links and feel free to ask for input as you go.

The closer you code conforms to UI's conventions, the easier it will be to accept this for the official plugin process later so the fact that you're using the CSS framework is great. Try to dig around though the dev docs and through the existing UI plugins to get a sense of how we code.

I've written my formvalidation utility so that it has a string validator which allows the adding of new rules and new messages. the widget of the same name attaches to input fields and fires events that can be added to.

usage would be;

$.ui.formvalidation.addValidator(name, method, message);

and;

var result = $.ui.formvalidation.validate('matt@800px.com', { 'email': true });
var result = $('<input name="email" value="" />').formvalidation({ required: true, 'type': 'email' }).formvalidation('validate');

The now seperate input widget adds event handlers and styling to the basic input element and allows you to set up formvalidation using the form validation utility like so;

$('<input name="email" value="" />').input({ validation: true, rules: { required: true, 'type': 'email' } });

I have a password strength validator that returns a percentage rating and checks against the 'min' option. I need to add the code to the input field so that it can utilize the results of this function.

The input widget could have placeholder code adding so you don't need labels but it does currently add the value of any associated label to the helper message.

I have begun the identification of forms as validation wrappers but not yet added form messaging. I have left other elements but plan on something similar so you don't need fields inside forms (for none post purposes).

There is also no code yet to check other input fields such as radio/checkboxes and select fields.

I only have basic tests set up so far, so they aren't particularly reliable yet. anyway I added them all her for you to check over;

http://www.800px.com/ui-input/

I'd like comments on my ui.formvalidation scripts;

http://clients.800px.com/ui-formvalidation/

This includes;

function: $.formvalidation(value, rules);
widget: $('<input />').formvalidation(options);

you can also use the widget on a form;

http://clients.800px.com/ui-formvalidation/form.htm

As well as this I've created a ui.input widget which basically makes input styling a bit more ui friendly;

http://clients.800px.com/ui-formvalidation/ui.input.htm

All comments would be very appreciated.