jQuery.html5form

HTML5 validates forms without additional JavaScript.
Currently only latest versiones of Firefox, Safari & Google Chrome supports this functionality.
This plugin gets the same result in all versions on Internet Explorer and Firefox 3.6.
With a single line of code...

HTML5 Form jQuery
Multiple example

Show Source

//HTML source
<form action="upload.php" method="post" id="form_test">
    <fieldset>
        <legend>Multiple example</legend>
        
        <label for="name">Name</label>
        <input type="text" name="name" id="name" title="Name" maxlength="60" placeholder="Name" autocomplete="off" required/>
        
        <label for="email">Email address</label>
        <input type="email" name="email" id="email" title="Email address" maxlength="40" placeholder="Email address" autocomplete="off" required/>
        
        <label for="website">Web Site</label>
        <input type="url" name="website" id="website" title="Web Site" maxlength="40" placeholder="http://" autocomplete="off" required/>
        
        <label for="telephone">Telephone (optional)</label>
        <input type="tel" name="telephone" id="telephone" title="Telephone" maxlength="20" placeholder="Telephone" autocomplete="off"/>
        
        <label for="comment">Comment (max 100)</label>
        <textarea name="comment" id="comment" title="Comment" cols="30" rows="5" maxlength="100" placeholder="Comment..." required>
        </textarea>
        
        <input type="submit" value="Send" class="submit"/>
    
    </fieldset>
</form>

//jQuery source
<script>

    $(document).ready(function(){
        
        $('#form_test').html5form({
            allBrowsers : true,
            responseDiv : '#response',
            messages: 'en',
            messages: 'es',
            method : 'GET',
            colorOn :'#6b6764',
            colorOff :'#0d85a5'
        });
        
    });

</script>

Required email input with message

Textarea maxlength example

Hiding label example

html5form v1.5

12-04-2011 - Added Support input type="image" & input type="button" (Thanks to @zguillez)

Cross Browser Testing:

  • Internet Explorer: IE6+
  • Mozilla Firefox: 3.6+
  • Google Chrome: 10+
  • Apple Safari: 4+
  • Opera: 10+

Developer Version 1.5