jQuery.h5form - HTML5 Forms Plugin

This plugin gives all browsers the HTML5 forms like the Opera.

These enhancements are determined in the presence or absence of the object in a input element. Therefore it will be able to support nearly maintenance-free for the other versions of browsers.

Some of the features like the date state use to determine the type and version of browser. Even if the browser improvements, it uses the extension of the plugin.
Because, it is in order to avoid maintenance support by fixing the state it was in when you install the plugin to your site.

And this will also fix several bugs of the Internet Explorer on submit, and will allow you to use the button element.

This has a large file size for multi-function. However, it binds only the features that are needed by the browser for the element of the page, and it will work lightly.
If you wish, you can get a smaller size javascript by removing unnecessary features.

Supported Forms

In the following table, features by browser itself is marked as "S", and enhancements by this plugin is marked as "E".
The asterisk sign on the item name refers to basic configurations and the plus sign refers to customized configurations. See the section of the download.

>> Demo and testing form is here!

IE 6 IE 7 IE 8 IE 9 IE10 Firefox Chrome Safari Opeara Android*7
All elements + The balloon message *1 E E E S S S S S E
* The unified message - - - - E E E E E -
+ $.fn.h5form.setCustomValidity E E E E E E E E E E
+ $.fn.h5form.checkValidity E E E E E E E E E E
The form element + The novalidate attribute E E E E S S S S S E
The input element + The autofocus attribute E E E E S S S S S x
+ The required attribute E E E E S S S S S E
+ The pattern attribute E E E E S S S S S E
+ The placeholder attribute E E E E S S S S S S
+ The autocomplete attribute E E E E S S S ? S -
+ The list attribute (The datalist element)*2 E E E x S S S ? S -
+ URL state E E E E S S S S S E
+ E-mail state E E E E S S S S S E
+ Number state*8 E E E E E E S S S E
+ Range state E E E E S S S S S E
+ Date state E E E E E E S E S E
+ Time state E E E E E E S E S E
+ Date and Time state E E E E E E E E S E
+ Local Date and Time state E E E E E E S E S E
- Month state E E E E E E S E S E
- Week state*3 x x x x x x S x S x
- Color state*4 x x x x x x S x S x
+ Fixed bug on press enter*9 E E E - - - - - - E
The textarea element + The maxlength attribute E E E E S S S S S S
The input and button element
in the submit button state
- The form attribute*5 x x x x S S S S S x
+ The formaction attribute E E E E S S S S S E
+ The formenctype attribute E E E E S S S S S E
+ The formmethod attribute E E E E S S S S S E
+ The formnovalidate attribute E E E E S S S S S E
+ The formtarget attribute E E E E S S S S S E
+ Fixed bug on submit E E - - - - - - - -
- Fixed bug of default*6 x x - - - - - - - -
The balloon message is disappeared behind a select element with IE 6.
IE 9 does not read childen of the datalist to DOM. You should insert a data-option attribute encoded to json in the datalist. See the demo and testing form.
It is not difficult to support using the jQuery UI. Do you want these states?
The jQuery UI does not have a color widget, so that I can not adopt any plugin as the standard.
Sorry, this attribute have been removed because it was not work as strict specifications and it was also a breeding ground for bugs for other features.
Sorry, to solve this problem using the javascript does not seem possible.
Android browser even if it has attributes of the HTML5, does not have the function. You must know many sites for the HTML5 Forms are posted incorrect information.
I tried test on my phone of Android 2.3.4 and 4.0.4. Please contact me if you have information about other versions or iphone.
The plugin gives spin buttons except validations with IE 10, and gives validations except spin buttons with Android.
In the Android it will move a focus to the next control, or submit only on the last control.


Please download jquery.h5form-2.13.1.zip

Otherwise, you can fork on the GitHub.


And if you wish, you can get a smaller size javascript by removing unnecessary features.
Please uncheck the unnecessary features and click the download button. Oh yes, you must have the style sheet included in the archive above to the other.

Only the function that united validation messages with modern browsers is left if you uncheck all.


You may only append to your HTML header the following code.
Please rewrite the URL path as appropriate.

<link rel="stylesheet" href="/css/jquery.h5form-2.13.1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/jquery.h5form-2.13.1.min.js"></script>

$(function() {

jQuery UI

If you wisth, please install the jQeury UI for the date, the number, the range and the autocomplete.
The datepicker, the spinner or the slider will be automatically handle on these elements.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Furthermore, you can use it in date-time states if a mask plugin is installed.
The mask plugin must be defined as `$(expr).mask(options)`. Please define the following rapper as needed before h5from.

$.fn.mask = function(opt) { $(this).mymask(opt); };
  maskDate: { mask: '####-##-##' },
  maskTime: { mask: '##:##' },
  datepicker: {
    showOn: 'button'


If you have styles that specified by the type of the number, the date or the time , please add class name "h5form-typename".
The elements that have been extended by the plugin is corrected the type and added the class instead.

[type="number"], .h5form-number {
  font-weight: bold;


You can specify the options in the table below to the h5form, if necessary.

Option name Defalut value Description
styleErr { backgroundColor: 'mistyrose' } The style of validation errors. It does nothing if you set false.
classPlaceholder 'h5form-placeholder' The class name of the placeholder.
msgEmpty 'Please enter this field.' The error messages by the plugin.

If an element have a title attribute, the title sting is appended after these messages.
When you want to make only title message, please set a space character as error message.

In the msgMaxlen, the msgMin and the msgMax, # is replaced by the value.

In the modern browser, it replaces a peculiar message with these.
Thus you can offer the user interface that is common to all browsers.
msgUnselect 'Please select an item.'
msgUncheck 'Please check this checkbox.'
msgPattern 'Does not match the required pattern.'
msgEmail 'E-mail address is not correct.'
msgUrl 'URL is not correct.'
msgNumber 'Number is not correct.'
msgDatetime 'Date time is not correct.'
msgDate 'Date is not correct.'
msgTime 'Time is not correct.'
msgStep 'Step is not correct.'
msgMin 'Please be greater than or equal to #.'
msgMax 'Please be less than or equal to #.'
msgMaxlen 'Too many # characters.'
datepicker { onClose: function() { $(this).blur(); } } The options of the datepicker. See the documents of the jQuery UI.
The dateFormat is fixed "yy-mm-dd", and the maxDate and the minDate are determined by the attribute of the min and the max on the element.
maskDate '9999-99-99' Some plugin is "{ mask: '9999-99-99' }".
maskMonth '9999-99'
maskTime '99:99'
dynamicHtml '.h5form-dynamic' For example, if you have a script to add the required to email2 when the email has been entered, you may set 'h5form-dynamic' to the class of the email2.
Then, the validation is performed at submission. Or, you may specify the selector of the target element to this option.
exprBehide '.h5form-behind' If you have hidden balloons behind the other element, you may set 'h5form-behind' to the class of the element, or specify the selector to this option.
The element is in a disabled state while displayed the balloon.
options { } When you want to control a function in defiance of a browser judgment, please use these options. All the types of the value are Boolean.
ex. options: { reqCustomValidity: true }
Options Description
reqRequired Use required validation of the plugin.
reqPattern Use pattern validation of the plugin.
reqCustomValidity Use balloon messages of the plugin.
reqPlaceholder Use placeholders of the plugin.
Use date-time userinterfaces of the plugin.
You can set true these value to constitute user view that doesn't depend on the browser.

You will find some of the other options on the source. Please note the undocumented options will be changed or discontinued without notice.


The plugin provides an available method of the HTML5 with old browser.
The messages are stored in the custom validity of the element with modern browser, and in jQuery.data('CustomValidity') with old browser.

Method Description
$.fn.h5form.checkValidity( selector ) It returns a validation state of the designated element.
If one of all elements of the designated selector has an error, it returns FALSE.
$.fn.h5form.setCustomValidity( selector, message ) It stores a validation message in the designated element.
The stored message is displayed when a user pushed the submitt button.
To delete message please give empty character string, rather than null that does not work with Opera.
$.fn.h5form.showBalloon( selector, message ) It display a balloon message in the designated element. However, it do not set a validation error.


The placeholder is simply inserted as span just before the input element.
That indication point may be disturbed by the design of the form. In that case, please adjust it in the following class-style.

<span class="h5form-placeholder">
<input type="text" name="phone"
.h5form-placeholder { position: absolute; color: #a1a1a1; background-color: transparent; margin: 0.2em; padding: 0; z-index: 999; }

Balloon messages

The balloon message is simply inserted just before each element.
Then relative to the display position of the each element, it place shift the container and the inner, and expresses the beard.
That indication point may be disturbed by the design of the form. In that case, please adjust it in the following class-style.

Also, the error message on server side after submit transition, you can get the balloon message by the same output format.

fig. The required message
border and margin of span
fig. The required message 2
<span class="h5form-response">
  <p>Please enter this field.</p>
<input type="text" name="company" required>

NOTE: Span as container is for IE 6.

.h5form-response { position: absolute; margin: 1.6em 0 0 14px; padding: 0; border-right: 10px solid khaki; border-top: 10px solid transparent; box-shadow: 3px 3px 6px dimgray; z-index: 1000; -border-top-color: white; /* for IE6 */ } .h5form-response p { float:left; text-align: left; margin: 0 -400px -20px -20px; background: khaki; color: black; padding: 10px; border-radius: 8px; box-shadow: 3px 3px 6px dimgray; -position: relative; /* for IE6 */ }


The following recommended setting will allow you make the most of HTML5 such as date-time states.

<!-- Style sheets -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/css/jquery.h5form-2.13.1.css">

<!-- jquery & jquery ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<!-- mask & h5form -->
<script src="/js/jquery.maskedinput.js"></script>
<script src="/js/jquery.h5form-2.13.1.min.js"></script>

$(function() {
    // Unify UI between browsers with messages defined here.
    msgEmpty: 'Please enter this field.',
    msgUnselect: 'Please select an item.',
    msgUncheck: 'Please check this checkbox.',
    msgPattern: 'Does not match the required pattern.',
    msgEmail: 'E-mail address is not correct.',
    msgUrl: 'URL is not correct.',
    msgNumber: 'Number is not correct.',
    msgDatetime: 'Date time is not correct.',
    msgDate: 'Date is not correct.',
    msgTime: 'Time is not correct.',
    msgStep: 'Step is not correct.',
    msgMin: 'Please be greater than or equal to #.',
    msgMax: 'Please be less than or equal to #.',
    msgMaxlen: 'Too many # characters.',
    msgSpin: 'Press Shift to vary a hour, or press Ctrl for with short steps.',
    // Unify UI between browsers with a calendar of jquery ui.
    options: {
      reqDateTimeLocal: true,
      reqDateTime: true,
      reqDate: true,
      reqTime: true,
      reqMonth: true
    // Calendar option (voluntarily)
    datepicker: {
      autoSize: true,
      changeMonth: true,
      changeYear: true,
      showOn: 'button'


When using the datetime-local state or the datetime state, you need to be aware delimiter of date and time.
The type of datetime of Mysql is "2013-12-26 12:32:00", but the type of HTML5 is "2013-12-26T12:32:00" defined in the ISO-8601.

Opera that was prior to HTML5 support recognizes the value of space-separated, but Chrome only recognizes T-delimited.
This is by design when loading into the DOM from HTML. Therefore, it can not be corrected by this plugin or any javascript.

There is a need to output a string replacement on the server side, or to format conversion in Smarty template as follows.
Fortunately, you can save as it is the datetime of T-delimited to the db of Mysql.

<input type="datetime-local" name="date_start"


This plugin was derived from jquery.html5form-1.5.js. But I determined that the project became apparent to another code, I was allowed to change to a single copyright since version 2.
Some Variable names and structure may still have left a remnant of html5form.

Based project: jquery.html5form-1.5.js
(c) 2010 Matias Mancini (http://www.matiasmancini.com.ar)


Version 2.13.1 (2013-12-26)

Version 2.13.0 (2013-11-21)

Version 2.12.3 (2013-10-02)

Version 2.12.2 (2013-10-01)

Version 2.12.1 (2013-09-27)

Version 2.12.0 (2013-09-13)

Version 2.11.4 (2013-09-05)

Version 2.11.3 (2013-09-04)

Version 2.11.2 (2013-08-06)

Version 2.11.1 (2013-08-05)

Version 2.11.0 (2013-07-22)

Version 2.10.3 (2013-05-21)

Version 2.10.2 (2013-04-16)

Version 2.10.1 (2013-03-22)

Version 2.10.0 (2013-03-21)

Version 2.9.4 (2013-03-15)

Version 2.9.3 (2013-02-23)

Version 2.9.2 (2013-02-22)

Version 2.9.1 (2013-02-16)

Version 2.9.0 (2013-02-01)

Version 2.8.1 (2013-01-28)

Version 2.8.0 (2013-01-12)

Version 2.7.2 (2012-12-11)

Version 2.7.1 (2012-11-14)

Version 2.7.0 (2012-10-16)

Version 2.6.1 (2012-09-29)

Version 2.6.0 (2012-09-29)

Version 2.5.0 (2012-09-04)

Version 2.4.4 (2012-07-13)

Version 2.4.4 (2012-07-10)

Version 2.4.3 (2012-07-09)

Version 2.4.2 (2012-06-30)

Version 2.4.1 (2012-06-26)

Version 2.4 (2012-06-22)

Version 2.3 (2012-06-18)

Version 2.2 (2012-06-15)

Version 2.1 (2012-06-12)

Version 2.0 (2012-06-10)