November 14, 2010

HTML5 Forms Validation in Firefox 4 - Mounir Lamouri’s Blog

HTML5 Forms Validation in Firefox 4

By Mounir Lamouri on Wednesday, November 10 2010, 18:00 - Permalink

HTML5 Forms specifications introduce some new input types, attributes and other awesome features. One of the transversal features is native browser-side form validation.
For Firefox 4, we tried to focus on that feature and ship it as complete as possible. All following features descriptions are available with Firefox 4 beta 7 except some which are going to be available in following betas (it’s clearly specified when that’s the case).

Why browser-side form validation?

The idea behind form validation in HTML5 Forms is to prevent using JavaScript to check basic stuff in your forms: Is this email address valid? Is this field filled in? Do passwords match? These are often checked in JavaScript when you click on the submit button. You might write your own javascript code or use a library but that will always be a repetitive, boring and error-prone task. With forms validated by the browser, you no longer have to care about those steps, just write simple HTML.
For the user, the validation being done by the browser is a guarantee of quality with better accessibility and consistency.

How can I make my form using this feature?

If you use new attributes related to form validation or new input types with internal validation, you will automatically opt in for form validation by the browser (if supported by the browser). All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.
In addition, these attributes will provide an automatic validation mechanism:

  • required: a required form control will be invalid if its value is empty. This is working for <input> and <textarea>. If set on a <input type=’checkbox’>, the element will have to be checked. On a group of <input type=’radio’>, one of the radio button will have to be selected. If set on a <input type=’file’>, a file will have to be selected.

<select> will accept the required attribute in Firefox beta 8 (see What’s next?).

<input required> <textarea required></textarea>
  • pattern: you can specify a regular expression [1] to check the element’s value. This can be used only on some <input> types (text, search, tel, email and url). When you use pattern, it’s highly recommended to use the title attribute to describe the pattern.
<input type='tel' pattern='\d\d \d\d \d\d \d\d \d\d' title="Write a phone number in the format 'XX XX XX XX XX'"> <input type='email' pattern=".*@company\.com" title="Enter you company email address">
  • maxlength: maxlength can already be used with Firefox 3.6 but it will only block the keyboard inputs made by the users on an <input> so they can’t type more characters than the value specified in the maxlength attribute. In Firefox 4 beta 7, this applies on <textarea> too. In addition, if the value is set via .value, the element will become invalid if the new value has a length bigger than maxlength.
<input maxlength='10'> <textarea maxlength='140'></textarea>

How can I opt out?

You should probably think about that twice, If you have your own system for form validation, you should probably try to disable it when the browser can manage form validation instead of disabling the validation by the browser for your own system. However, there might be other reasons why you would want to disable form validation. Good reasons might be if you want to use some new input types but you don’t care about checking the validity.
The simplest way to opt out is to add the novalidate attribute to your <form>. You can also set formnovalidate on your submit controls. You should prefer formnovalidate than novalidate if you want to have one submit control with form validation and another without.
Detecting this feature is not really easy given that you want to have a message being shown but you can’t know for sure if the browser is going to show something even if form validation seems to be supported. I will try to write another post about that later.

How can I specify my validity rules?

You can make an element invalid by calling .setCustomValidity(errorMsg). Doing some checks on oninput() and calling .setCustomValidity() should be enough in most situations.
.setCustomValidity() takes in parameter the error message. You can pass the empty string to .setCustomValidity() if you want to remove the custom error.
With this method, you can check that two password fields have the same value very easily:

<script> function checkPassword(p1, p2) { if (p1.value != p2.value) { p2.setCustomValidity('passwords do not match'); } else { p2.setCustomValidity(''); } } </script> <input type='password' id='p1'> <input type='password' onfocus="checkPassword(document.getElementById('p1'), this);" oninput="checkPassword(document.getElementById('p1'), this);">

How can I change the text of the error message?

Each error types have a string associated describing the error. For example, if an input element is required and has no value, the message will be “Please fill out this field”. Firefox will try to be as clever as possible to show the best error message but you might want to override it in some situations where the rules are very complex. For example:

<input type='email' required pattern='.*@company\.com'>

You might prefer to have a simple “Please, enter your corporate email address.” instead of three generic messages depending of the unfulfilled constraint.
To help with that, we have introduced a non-standard x-moz-errormessage [2] which let you specify an error message for a given form control. Regardless of the error, if x-moz-errormessage is present and different from the empty string, its value will be used as the error message instead of the default one.
This is non-standard so it should be used carefully. See http://www.w3.org/Bugs/Public/show_…. In addition, you should know that .setCustomValidity() lets you indirectly set your own error message but we do not really like that because you will let the browser think that the element is suffering from a custom error even if it is not.

How can I change the error popup UI?

Unfortunately, there is no way to change the UI. The popup is part of the browser and it’s currently not possible to style the browser from the content. This might change later but that will not be done for Firefox 4.
If you think the current popup is ugly, you should know it’s not final. We will try to enhance that later, see bug 602500. All comments are very welcome!

New CSS pseudo-classes and default styles

CSS3 UI introduce new pseudo-classes that HTML5 is now using like :invalid, :valid, :required and :optional. Firefox 4 beta 7 supports all these pseudo-classes and adds a new pseudo-class: :-moz-submit-invalid which applies on submit controls when a form has an invalid element.
:invalid has a default style which is a red box-shadow. This default style is going to be removed when :-moz-ui-invalid will be added (see What’s next?). In the mean time, you can easily remove this default style in your stylesheets:

:invalid {   box-shadow: none;   }

What’s next?

It’s a bit early to say what will be done after Firefox 4 but we already know that a few things will be done in the following betas:

  • required attribute for <select>. You will be able to specify that a select element is required. This rule will be fulfilled if you select at least one option which has a value different from the empty string. See bug 596511. This might be fixed for beta 8.
  • Let <output> being subject from constraint validation. Output elements are currently barred from constraint validation but it seems to be too restrictive and .setCustomValidity() might be useful in some situations. See bug 604673. This might be fixed for beta 8.
  • Adding :-moz-ui-invalid and maybe -moz-ui-valid pseudo-classes. :invalid and :valid pseudo-classes are very bad for UI and UX perspectives. We want to introduce new pseudo-classes which would follow some UX rules. This will probably be the subject of a future blog post. Related bugs: bug 605124 and bug 605125.

Notes

[1] The regular expression will follow the JavaScript regular expression rules and will be checked against the entire element’s value.

[2] The prefix is the new recommendation, see http://www.w3.org/Bugs/Public/show_….

Posted via email from Jean-Pierre Pommet’s Blog | Comment »

Comments (View)
November 9, 2010

RockMelt - Your browser. Re-imagined.

Pretty cool to see the whole RockMelt Team when you download their browser.
But now time to test it !

Posted via email from Jean-Pierre Pommet’s Blog | Comment »

Comments (View)
November 6, 2010
Comments (View)
June 29, 2010
Comments (View)
June 22, 2010

jQTouch and Sencha Touch: Which is right for you?

9-bits:

Recently I had the pleasure of announcing Sencha Touch, a standards-based mobile app framework which I helped create. As expected, this has raised some questions about jQTouch, a similar library I created last year. As covered before, jQTouch will remain separate, maintained, and free under the MIT license. This post helps distinguish the similarities and differences between the two libraries for the discerning mobile developer.

Read More

Comments (View)
June 18, 2010

senchainc:

In introduction to Sencha Touch’s features and capabilities from our VP Products, Michael Mullany.

Comments (View)
May 25, 2010

Ajaxian » WebM: The On2 codec is here, with support from Google, Mozilla, and Opera

Wednesday, May 19th, 2010

WebM: The On2 codec is here, with support from Google, Mozilla, and Opera

Category: Google, Video

The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.

The WebM launch is supported by Mozilla, Opera, Google and more than forty other publishers, software and hardware vendors.

WebM is an open, royalty-free, media file format designed for the web.

WebM defines the file container structure, video and audio formats. WebM files consist of video streams compressed with the VP8 video codec and audio streams compressed with the Vorbis audio codec. The WebM file structure is based on the Matroska container.

It happened. Today, Google is up on stage at I/O unveiling a new WebM project alongside a slew of partners (notably: Mozilla and Opera on the browser side) that gets the On2 codec out into the open. This is huge news for the fight for Open Video, and everyone will now have eyes on Safari.

YouTube will be a huge push here, and you can go to their html5 version: http://www.youtube.com/html5 and check it out. Today it is available in trunk builds on Chromium and Firefox. Soon, an Opera beta, Chrome dev release, and more.

The project is going after:

  • Openness and innovation. A key factor in the web’s success is
    that its core technologies such as HTML, HTTP, and TCP/IP are open
    for anyone to implement and improve. With video being core to the
    web experience, a high-quality, open video format choice is needed.
    WebM is 100% free, and open-sourced under a
    BSD-style license.

  • Optimized for the web. Serving video on the web is different
    from traditional broadcast and offline mediums. Existing video
    formats were designed to serve the needs of these mediums and do
    it very well. WebM is focused on addressing the unique needs of
    serving video on the web.

    • Low computational footprint to enable playback on any device,
      including low-power netbooks, handhelds, tablets, etc.*

    • Simple container format

    • Highest quality real-time video delivery

    • Click and encode. Minimal codec profiles, sub-options; when
      possible, let the encoder make the tough choices.

* Note: The initial developer preview releases of browsers supporting WebM are not yet fully optimized and therefore have a higher computational footprint for screen rendering than we expect for the general releases. The computational efficiencies of WebM are more accurately measured today using the development tools in the VP8 SDKs. Optimizations of the browser implementations are forthcoming.

Congrats Open Web.

Update: Flash will ship VP8, as will IE9. Now everyone looks at the Safari team :)

(One thing though about IE9 support: “In its HTML5 support, IE9 will support playback of H.264 video as well as VP8 video when the user has installed a VP8 codec on Windows.”). That is a bummer.

Posted by Dion Almaer at 10:46 am 8 Comments

—>

I have been working with video for a long time, I am glad there is a new open source video format based on the excellent video codec VP8 video codec, audio codec Vorbis and the container Matroska. it’s a good news for the Open Web.

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Comments (View)
May 13, 2010

Chromium Blog: A sneak peek at the Native Client SDK

Write code in js, use the power of C/C++ libraries for web apps ! Works only on Chromium though…Just imagine what kind of powerful web application you can develop !!

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Comments (View)

Multi-Safari

Multi-Safari

Français

Magic Launch: Help you files open in the right app.

Introduction

Safari normally uses the Web Kit framework found inside Mac OS X to render web pages and execute javascript. This means that if you preserve an old version of Safari to run it on a newer version of Mac OS, it will use the newer Web Kit found in the system and you will get the same results as with the newer version. Thus, you would normally need a separate installation of Mac OS X for each version of Safari you want to test a website into.

These special versions of Safari use the original Web Kit framework that came with them, bundled inside the application. They will mimic original Safari rendering and javascript behaviours. HTTP requests and cookies however are still handled by the system and may not work exactly the same.

Download

Thanks to the jQuery Project for hosting these files on their CDN.

Note: The files only contain English and French localizations to make them smaller.

Safari for Leopard (Mac OS X 10.5)

Leopard shipped originally with Safari 3.0. Safari 3 for Leopard is not compatible with Mac OS X 10.4 (Tiger) although Safari 3 for Tiger works fine on Leopard.

  • Safari 3.2.1 (Leopard version) (19.2 Mb)

  • Safari 3.1.2 (Leopard version) (18.7 Mb)

  • Safari 3.0.4 (Leopard version) (15.8 Mb)

Safari for Tiger (Mac OS X 10.4)

Tiger shipped originally with Safari 2.0. All these versions should work fine on Mac OS X 10.4 (Tiger) and 10.5 (Leopard). There’s a small problem when running 2.0.x on Leopard though: the javascript alert function does not work.

  • Safari 2.0 (3.4 Mb)

  • Safari 2.0.2 (3.2 Mb)

  • Safari 2.0.3 (3.2 Mb)

  • Safari 2.0.4 (3,2 Mb)

  • Safari 3.0.4 (Tiger version) (13.2 Mb)

Safari for Panther (Mac OS X 10.3)

These versions only run on Mac OS X 10.3. They depend on a few private frameworks and symbols in the operating system which are no longer here in later versions.

  • Safari 1.2 (2.7 Mb)

  • Safari 1.2.3 (2.2 Mb)

  • Safari 1.3 (3.9 Mb)

  • Safari 1.3.1 (4.2 Mb)

  • Safari 1.3.2 (4.1 Mb)

Safari for Jaguar (Mac OS X 10.2)

This version of Safari works on Mac OS X 10.2 (Jaguar) through 10.4 (Tiger). Unusable on Leopard.

  • Safari 1.0 (2.2 Mb)

Compatibility Grid

Version 10.2.8 (Jaguar) 10.3.9 (Panther) 10.4.11 (Tiger) 10.5.x (Leopard)
1.0 x x x1
1.2.x x
1.3.x x
2.0.x x x2
3.0.x (Tiger) x x
3.0.x (Leopard) x

How I did this

I have documented the procedure I use to create the self-contained applications on my weblog. There are two differences however:

  1. Added a nice version-number badge on the icon so you can distinguish different versions when side by side in the dock.

  2. Instead of naming the old safari executable “TrueSafari”, I name it with the appropriate version number and change the script accordingly. This means that when one Safari crash, the version number will appear in the error message.

  3. The bundle identifier for Safari 2.0 and later is changed to com.michelf.MultiSafari to avoid a version-check on Leopard preventing older versions of Safari from launching. As a consequence, preferences for the modified Safari downloads are stored separately from the Apple-provided Safari, and the launcher script has been modified to copy Apple’s Safari preference on the first run.

Notes

I’m providing these files free of charge so that web developers can test their website for interoperability within many version of Safari with less hassle. The copyright for these files still belongs to Apple Inc. If Apple asks, I will remove the files.

  1. Safari 1.0 works on Tiger but you’ll have to create the window in an unconventional way: either by opening a local file or by choosing Open Location in the file menu. The “Cannot open file” message at the application startup can be ignored. 

  2. Safari 2.0.x didn’t work initially on Leopard due to the system blocking older versions of Safari. The 2.0.x downloads have been updated to use a different bundle identifier (com.michelf.MultiSafari) and are no longer affected by this block. 

It is pretty useful if you need older version of Safari for different version of MAC OSX, just download them !

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Comments (View)
April 16, 2010

Eliot’s Ramblings / Streaming Twitter into MongoDB

curl http://stream.twitter.com/1/statuses/sample.json -u: | mongoimport -c twitter_live

One thing that you can do with mongo is have 1 streaming master and 1 read/write master

server A:

./mongod —master —dbpath /tmp/a

server B

./mongod —dbpath /tmp/b —master —slave —source localhost:27017 —port 9999

You can then pipe the stream into server a, and it will only process the live stream.

Server B will replicate all changes.  You can also write to it, query on it, etc…  This way you can do operations that block writing on server B, but server A will never backlog.

A super good tip with MongoDB !!! :D

Posted via web from Jean-Pierre Pommet’s Blog | Comment »

Comments (View)