Jquery HTML 5 Form Validation to Firefox Opera and IE

The HTML5 validates forms without additional JavaScript. But this feature is currently available in only Chrome 5 and Safari 5. But a small plugin to jquery will do the magic. It will extend the whole utility to all other Browsers like Firefox,Opera and IE.

This Plugin is created by Matias Manchini

How does it work?

Just create your form according the HTML5 syntax and the script will execute itself. It does not require extra classes. The plugin gets all the information from the HTML source. Runs automatically when detects Internet Explorer, Opera or Mozilla Firefox.

Cross Browser Testing:

  • Internet Explorer: IE6 – IE7 – IE8 – IE9 Platform preview 3
  • Mozilla Firefox: 4.0beta – 3.6 – 3.5 – 3.0
  • Google Chrome: 5.0 – 4.0
  • Apple Safari: 5.0 – 4.0

Plugin Features.

Customize handling behavior.

The form sends through an asynchronous Ajax request by default.
The plugin automatically gets method and action attributes declared on the form.
To change any of this behavior just follow these rules.
<script>
    
    $('#myform').html5form({
        
        async : false, // cancels the default submit method.
        method : 'GET', // changes the request method.
        action : 'respuesta.php', // changes the action method.
        responseDiv : '#respuesta' // a content div to get the callback function response.
        
    })
    
</script>

Multiple forms.

If you have more than one form, you can set different options for each one, just call the .html5form() method by the ‘#id’.
In case of ‘form’ label, the plugin will handle each form independently but the options will be equal for all, the best way to do it is to call each form separately.
<script>

    $('#myform_one').html5form({
        method: 'POST',
    });

    $('#myform_two').html5form({
        method: 'GET'
    });

</script>

Text Colors.

Allows you to customize the default color of input text and placeholders.
<script>
    
    $('#myform').html5form({
    
        colorOn: '#999',
        colorOff: '#000'
    
    })
    
</script>

Error Messages.

The plugin can display a descriptive error in case of empty fields or invalid email address. This is set to false by default.
The plugin returns default warnings in English, Spanish and Italian if property messages is set with the chosen lenguage.
Another method for doing so is to assign customized values for each response in emailMessage and emptyMessage properties.
<script>
    
    //default English messages method
    $('#myform').html5form({
    
        messages : 'en',
        responseDiv : '#response'
    
    })
    
    //default Italian messages method
    $('#myform').html5form({
    
        messages: 'it',
        responseDiv : '#response'
    
    })
    
    //custom message method, this one takes precedence over default messages
    $('#myform').html5form({
    
        emptyMessage : 'This is a required field',
        emailMessage : 'This email address is not correct, please try again',
        responseDiv : '#response'
    
    })
    
</script>
This funcionality has 3 conditions:
  • The request must be asynchronous.
  • Each input / textarea field must have a title.
  • The responseDiv must be declared.
Hiding labels.
The placeholder attribute of HTML5 is certainly very intuitive and easy to implement.
But our site must be ready to recieve users without enabled JavaScript in their browsers.
We recommend keeping label tags to describe fields and we include a hiding method too.
<script>

    $('#myform').html5form({
        labels: 'hide'
    });

</script>
Full browser support.
As we mentioned, WebKit browsers (Safari & Chrome) can handle webForms 2.0 forms without any help, they dont activate the plugin.
However, we can force it to work with all browsers to get additional customization.
<script>

    $('#myform').html5form({
        allBrowsers: true
    });

</script>

You can find the demo in his website. And You can download the Plugin from here.

Leave a Reply