HTML5 Form Validation with Style

This jQuery pluggin aims to take the syntax from HTML5's inputs and validation attributes to create error messages that you can actually style. This is to get around the fact that HTML5's shadow DOM is (at the moment) still so hard to style.

Features

  • Support for: required, email, phone, url, matching
  • A Function to run once the form is valid can also be passed in.
  • Error message customisation by adding data-msg="my error message" to the input

Limitations

  • Only one type of validation can be applied to an input. (required & type)
  • I'll add these features as & when I need them on production projects.
  • The pluggin could do with re-structuring, architecturally... its not great.

Use

$('#my_form_id').html5Val(function($form) {
	alert( '#' + $form.attr('id') + 'is valid, woop woop')
})

Download

You can download this project in either zip or tar formats. You can also clone the project with Git by running:

$ git clone git://github.com/byrichardpowell/html5-form-validation-with-style

get the source code on GitHub : byrichardpowell/html5-form-validation-with-style

Questions?

Fork me on GitHub