Archive for the ‘Web’ Category

XUI Validation has been updated, changes include:

• Clicking the links in the error summary block now focuses the user on the relevant input (as well as updating the fragment identifier in the URL)
• A new configuration variable (positionOfInlineAlerts) allows the inline error messages to be displayed either in the input’s label or after the form control itself (after the indicator icon).
• Tabbing into a control no longer triggers validation.
• Required fields are only validated after the user leaves the control, so they are not confronted by an error message if they clear the contents of a control to start over.
• A container element for each form control is updated after validation with the addition of a valid or invalid class so that the elements related to the control can be styled based on the outcome of the validation.
• The ability to display confirmation messages has been added. This allows the validation functions to confirm with the user how their input is being parsed. This is useful for complex data types like dates.

See the example page for a demonstration of the new features.

I have spent most of my waking moments this weekend coding, refactoring and documenting a framework for easily extensible unobtrusive client-side form validation.

XUI Validation is based on jQuery and provides a simple mechanism for adding new custom validations that will apply via unobtrusive semantic hooks to any form.

Why another unobtrusive validation framework? Because the other OSS validation frameworks I have come across are not as easily extensible, or provide the ability to display a summary of errors a the top of the form (on submit).

Check out the demonstration page demonstration page, or download the package the package to see what I mean.

Thoughts, ideas, feedback? Leave me a comment.

I noticed a seemingly insignifcant change at work today.

Not consciously at first. While browsing and searching online I just had this strange feeling in my gut, like something wasn’t quite right with the world.

Now that I realise what’s changed I can recognise it for what it truly is… the first sign (ggg?) of the coming apocalypse.

Anchors, be gone!.. Named anchors, at least.

I’m not a fan of linking to named anchors (for example: <a name="point-a"></a>). They limit you to identifying a point in the document, or at best some link text.

Its much more powerful to link to a section of a page using the id attribute on an element that contains the content you’re referring the user to.

For example:

<div id="section-a">
	<h2>Section A</h2>
	<p>Some content worth linking to...</p>
</div>

In this case when you link to the fragment-identifier #section-a you are signifying that the user should read the entire section of content.

But how can the user tell the difference?

Usually, they can’t! (only those who understand HTML and look at the code can tell).

That’s where Frag Link highlighter can help. After the user follows a link to a page fragment, Frag Link briefly highlights the section of content that was linked to.

It also helps in situations when the browser has scrolled all the way to the bottom of the page and the section in question still isn’t at the top of the viewport. The brief flash of colour can draw users’ attention to the relevant content.

Frag Link can also help draw attention to part of a page when no scrolling is involved or when there is more that one column of content.

Give the Frag Link demo a try and tell me what you think.

Getting closer with the Buttonise concept.

Again, the concept is not quite production-ready, but the OS mantra is Release early. Release often (and a week between updates is often for me ).

The key improvement of this release is that it will run well in common browsers (tested in Firefox 2, Opera 9, Safari 3).

There are still some styling issues to work through and a couple of functionality issues with IE6.