Custom input types and attributes
Here we make a custom time input with custom minlength and data-equals attributes. New wave form development. jQuery Tools Validator makes it easy.
Here it is. A HTML5 form together with our new attributes:
Implementing new attributes and input type is very easy with this tool. So easy that you'll end up developing new ones regularly. Each new attribute and input type requires a new custom validator function. They are added to the Validator tool with the $.tools.validator.fn method.
time input type
Time input belongs to the HTML5 standard. Here we implement it. A valid input has two numbers followed by ":" followed by two numbers. For example: 12:44.
This is the most common way of defining a custom validator. The first argument matches all inputs you want to validate. Here we select input fields whose type attribute is equal to "time". The second argument is the error message that is shown when validation fails. The third argument is the actual validator function; it must return true if the value is valid. The value is supplied as the second argument to the validator function.
Our next validator ensures that one field's value is equal to another field's value. For example data-equals="password" means that the value must equal to a field named "password". The data- prefix makes it valid HTML5.
Here you can see the backreference $1 in the error message. It is being replaced by the return value of the validator function when a validation fails. You can have zero or more backreferences and they must be contained in an Array. Also note that inside the validator this is a reference to the validator API.
Here we make use of the non-standard minlength attribute. When making custom attributes you can use any attribute name you like and things will work. The downside is that custom names don't pass HTML validation but in an ideal world this shouldn't be the case.
This time we return the error message and don't provide it as the second argument. This gives you the possibility to dynamically construct the message. You can return a simple string in which case it is assumed to be in English or you can return an object just as we do here.
Here we localize our time input with the $.tools.validator.localizeFn call.
And here are all the messages contained inside the validator as seen from the Firebug console.
You can read more about custom validators and localization from the validator documentation.
Once the custom validators have been defined we initialize validation for our form. We tweak the position of the error message with the offset configuration variable:
You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.
Pure CSS arrow
One interesting feature in columns.css is the arrow that is done with CSS only. No images. Here is the trick: