Open Source Resources for Web Application Developers

Validatious 2.0 is an easy form validation with unobtrusive JavaScript. Validatious requires no JavaScript library. However, if you’re already using one, Validatious can easily work with it, and even benefit from it.

There are several settings allow you to control how and when Validatious does validation, how it displays errors and more. If configuring isn’t enough, callbacks and easy overriding gives you complete control.

You can also add custom validators with only a couple of lines of JavaScript. If your site’s language is not english, you probably don’t want error messages in english. There are several ways of changing languages as well.

Requirements: Javascript Enabled
Demo: http://validatious.org/learn/examples
License: BSD License

• 6 Comments

Securimage is an open-source free PHP Captcha script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots.

It can run on most any webserver as long as you have PHP installed, and GD support within PHP. Securimage does everything from generate complicated CAPTCHA images to making sure the code the user entered was correct.

Requirements: PHP and GD Support
Demo: http://www.phpcaptcha.org/?page_id=12
License: License Free

• 1 Comment

CKEditor is a Version 3.0 of FCKeditor. After almost two years of intensive development, the first stable version of CKEditor 3.0 has finally released.

CKEditor is a complete rewrite of our so loved FCKeditor, which got a bit old after six years of great success. Not to say that FCKeditor is doing bad, but there are some new things we could bring to it, and CKEditor is the result of it. There are dozens of new features in CKEditor.

CKEditor is fast to load and fast to use. The development team stayed focused to bring the best performance you can have, using all modern best practices. You’ll be amazed with it.

You’ll note that they have also a brand new UI based on the Kama skin. Other than modern, Kama is colorful like a chameleon, so you can precisely match its color to your needs. This is an innovative and unique feature you’ll find in CKEditor only.

The CKEditor code is also much different now. It’s up to date with the new JavaScript development requirements, offering a rich and powerful integration and interaction API. The editor is totally plugin based, and it can be extended and modified in all senses to fit all needs.

Requirements: Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera
Demo: http://ckeditor.com/demo
License: GPL, LGPL, MIT License

• 11 Comments

In-Field Labels jQuery Plugin is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

There are some major benefits. The input element or textarea never really has content, so validation can proceed without first checking for the field value. It takes one line of jQuery code to implement. And its compatible with all modern browsers (And even IE6, the “not-so-modern” browser).

Requirements: jQuery Framework
Demo: http://fuelyourcoding.com/in-field-labels/
License: GPL, MIT License

• 2 Comments

Elastic jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight. The usage of Elastic is very straight forward. All you have to do is include the javascript file containing the plugin and use the elastic method.

Requirements: jQuery Framework
Demo: http://www.unwrongest.com/projects/elastic/
License: License Free

• 7 Comments

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

That’s why Apple implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text. Compared to common password fields on the web this method improves usability.

Therefore, Stefan Ullrich has developed a dPassword jQuery Plugin for transforming password fields into iPhone-like password fields, which delays password masking. It works unobtrusive too. Non-JS users get the common masked password fields.

Requirements: jQuery Framework
Demo: http://blog.decaf.de/2009/07/iphone-like-password-fields…
License: MIT License

• 7 Comments

Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then Thomas Reynolds has got something special for you. iPhone Style Checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes.

Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

Requirements: jQuery Framework
Demo: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
License: License Free

• 10 Comments

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. Cedric Dugas has created a jQuery Validation Engine in order to solve this problem.

When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

When you submit a form, it will look for inputs with predefined class selectors, and validate them accordingly to their type. It also does on the fly validation when you click outside of the input. Localisation language is also available. It has been tested on Internet Exploder 6 & 7, Firefox 3+, Safari 4 and Chrome 1+.

Requirements: jQuery Framework
Demo: http://www.position-relative.net/creation/formValidator/
License: MIT License

• 9 Comments

TokenInput jQuery Plugin allows users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen something similar on Facebook or TextboxList by Devthought.

There is an intuitive UI for selecting multiple items from a large list, the layout is fully in controlled with CSS, and easily customisable. Also, the result caching reduces server load. Users can select items using the mouse or keyboard. TokenInput jQuery Plugin is released under GPL2.

Requirements: jQuery Framework
Demo: http://loopj.com/tokeninput/demo.html
License: GPL2 License

• 3 Comments

CSSTricks has created a Website Change Request Form, in order to show off some fancy form styling and advanced form functionality. The form is fully functional, submission can only happen when the required fields are filled out properly. Submission is handled via AJAX, no page refresh needed.

jqTransform is used to help with the styling of the form elements. It completely replaces radio buttons and check boxes with custom graphics, and wraps textareas and text-based inputs in nice styling as well. The submission of all the form elements is SERIALIZED, via jQuery Form Plugin, so adding and changing form elements is easy.

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/WebsiteChangeRequestForm/
License: License Free

• 0 Comments