Since, I've been a little bored, I decided to write a little script that automatically validates HTML 5 webforms in browsers that don't support it.
If (for example) you would use
<input name="demoMail" placeholder="Please enter your email!" required="required" type="email" />
all modern browsers (Opera, Chrome, Safari and even Firefox) will automatically check if the value of that textbox is an email. Since the 'required' attribute is also set, the form will not be submitted unless a valid value has been entered. If the required attribute wouldn't have been set, the input could have been either empty or an actual email adres.
But what about IE7/8 and 9? They don't support webforms. Even when IE9 was release it
still didn't have any webforms support. So I'm busy writting a 'small' script that will 'automatically' validate the new html5 webforms. Currently my script validates the input types: 'Color, Email, Range, Url'. It also supports the Autofocus, Placeholder and the Required attribute. The support for other input types coming somewhere in the future.
I've written my script as an jQuery add-on, so in order to use this script you'll need
jQuery and also
modernizr. Modernizr helps with detecting what parts of the html5 webforms the users browser supports.
My script can currently be called like this:
$(document).ready(function(){
$(".SubmitButton").webforms()
});
The '.submitButton' points to an actual submit button that submits the form. When the script gets called it gives the field with the autofocus property the focus. Next it will look for input types that have a placeholder set. If the browser doesn't support the placeholder, my script will do the work of supporting it.
Next it will attach itself to the click event of the specified button. When you click that button my script gets called and (by default) it will locate
all input elements in the body.
If you don't want all input elements to be validated you can specify a container that contains the input elements that you want to be validated:
$(document).ready(function(){
$(".SubmitButton").webforms({
"container": "#frmExample"
})
});
The above example will validate all input elements that aren't supported by the browser in the element with id frmExample.
Please note that the submit button does not need to be in the container.
The list of validation errors can be shown in 2 ways:
(default) As an alert box. For example:
As some html code that contains an
<li> list of all the validation errors
. For example:
You can easily turn off the JavaScript alert by setting the option 'AlertErrors' to false.
$(document).ready(function(){
$(".SubmitButton").webforms({
"container": "#frmExample",
"AlertErrors": false
})
});
If the 'AlertErrors' option has been set to false, no error messages will be shown to the user. If you want the html list to be shown to the user you need to set at least 2 properties:
- The option 'ShowHtmlError' needs to be set to true.
- You also need to specify in what element the error should be shown. You can specify this with the option 'HtmlErrorDiv'. If this option is not specified, the script will look for the first element with the id 'errors' that is inside the document. This option takes any jQuery selector.
For example:
$(document).ready(function(){
$(".SubmitButton").webforms({
"container": "#frmExample",
"AlertErrors": false,
"ShowHtmlError": true,
"HtmlErrorDiv": "#frmExample #errorList"
})
});
This script is capable of generating it's own error messages, but it's recommended to specify your own error message for each input type. You can do this by adding the 'data-error' property on the corresponding field. For the email field in the example it could look like this:
<input name="demoMail" data-error="Please enter your email" type="email" required />
If any data is entered in this field that isn't an email adres or (if the field has the required attribute) is left blank, the text in the 'data-error' property will be used as 'error message' for the field.
On a last note: If you would like to change the line 'Please try sending the data again after fixing the following errors:' you can do it using the option called 'HtmlGeneralErrorMsg'.
$(document).ready(function(){
$(".SubmitButton").webforms({
"container": "#frmExample",
"AlertErrors": false,
"ShowHtmlError": true,
"HtmlErrorDiv": "#frmExample #errorList",
"HtmlGeneralErrorMsg": "Please fix all the errors"
})
});
If you want to take a look at the code yourself, then you can download it from:
https://sites.google.com/site/codefromnathan/Webforms.zip.
Please note that it isn't finished and that it still contains bugs.
License: MIT
version: 0.0.1
Known issues:
- Not all input types are supported (yet).
- The 'color' input doesn't show any help and still expects the user to manually input the hex. value of the color.
- There should be an option to show the error messages next to their input type.
- Code should get optimized in some places
- It's not completely tested yet
- There are a lot of script out there, who are better then this script
