Form, inputs, validation

JKumon: Kumon-like Game for Practicing Math & jQuery Skills

One of the most impressive skills that I like to train is doing math in my head. It’s so good don’t be addicted to that devil’s creation called calculator!

But what is even better is having some fun while practicing it. So you have to challenge yourself, see your improvements, and learn things. The most you train yourself, the most you’ll want to train.

This is why I like Kumon method. It’s used as a math and reading educational method, which is based on moving on to the next level when you have achieved mastery of the previous level. And mastery is defined as speed (using a standard completion time) and accuracy.

What we’ll be doing today is an amazing game to simulate this method so you’ll get a few operations to do, and have limited time to complete them. And the best thing is that it all will be done with jQuery!

So, let’s rock.

jQuery Marco Polo

A jQuery autocomplete plugin for the discerning developer.

After spending years struggling with various autocomplete plugins, I became fed up with their bugginess, poor documentation, lack of updates, inflexibility, and antiquated coding patterns. Surely something as fundamental as autocomplete could — really, should — be done better. And now it has. Meet Marco Polo. For the discerning developer.

Author: Justin Stayton
jQuery Version: 1.6 +
Official Page
Learn how to do it!

jFormVal Validation

JFormVal is jQuery Plugin for form validation.
It has been tested on all major browsers and works wonders!

Main features:
One line validation with method chaining
Bundle for error messages in different languages
Auto change css style of elements
Easy configuration

Author: Alexandre Zara
jQuery Version: 1.4 +
Official Page
Learn how to do it!

jQuery & Ajax Insert and Load

This tutorials explains how to insert and display a record without refreshing the web page. What ajax does that makes it epic is communicates data from the server to your website in the background without interfering with anything, even no needing for refreshing! A great plugin to put anywhere to communicate with the users, or say something yourself. It is developed using jQuery, so pretty much it’s simple.

Author: Srinivas Tamada
jQuery Version: 1.3 +
Official Page
Learn how to do it!

jQuery and Ajax “Non-refreshing” Form

A very simple plugin for submitting HTML form values without refreshing the page using Ajax & jQuery. Just implement this plugin and enrich your web applications.

Author: Srinivas Tamada
jQuery Version: 1.3 +
Official Page
Learn how to do it!

jQuery & CakePHP “Quick Save”

Coming up with ideas in your head is a common thing among designers. So what do you have to do with that idea? Research and build upon that idea.

Search the web vigourously is one things you have to do, and going page to page, you would like to save a tid bit of info here and there. And alot of them don’t have a quick save option, especially on tutorials.

Well thats where you can implement that functionality into your tutorials with this plugin. I know some of going are to say “Come on who needs that, or that it is easy to bookmark the tutorial.” But hey this just an idea that I came up with. And whats wrong with ideas right?

I hope this idea can be further experimented with and see if it is worth to implement.

Author: Marc Grabanski
jQuery Version: 1.3 +
Official Page
Learn how to do it!

Hover to Reveal Masked Password

We talked about how to improve your HTML forms performance a couple of days ago. There we covered a pretty controversial topic “Don’t mask your passwords”, discussing how bad masking your passwords could be for usability.

At this moment, we basically have two options: mask password field and don’t ask for any feedback, or show password field as text and potentially decrease security.

This is why I think a hover revealing password could be a really good alternative: You can increase your security, and if you are unsure about what you’ve typed just go and hover over it.

So, what we will be doing today is a jQuery plugin to do that, and additionally, we will have a behavior pretty similar to what many mobiles does, where we can see the last character for a couple of seconds. This is a good chance to learn more about plugins, dynamically generated content, and some good coding practices.

Moreover with this technique we could apply different effects and a lot of variations since all this things are based on non-obtrusive and almost only decorative javascript.

Author: Rochester Oliveira
Version: 1.0
jQuery Version: 1.4 +
Official Page
Learn how to do it!

Categories