Updates to 'webforms for no webform support'

I haven't been updating the script as much as I hoped too and you can blame my 'guild ward 2' addiction for that. But I did some minor updates to the script:

Note: see http://codefromnathan.blogspot.be/2012/10/since-ive-been-little-bored-i-decided.html for the basics of this script.

1. Show errors in all browsers

From now on this script shows all errors it finds in all browsers. If you don't like this behavior, you can change it so that it only shows the errors for the input types (and attributes) that the current browser doesn't support by setting the option 'IgnoreBrowserSupport' to false. For example:

$(".SubmitButton").webforms({
    "IgnoreBrowserSupport": "false" 
})

2. Added 'pattern' support

From this point on the script supports the 'pattern' attribute. This means that this script can read the value of the pattern attribute and then run in against the value of the textbox.
For more information about the pattern attribute itself see:

• http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-pattern-attribute
• http://www.w3schools.com/html5/att_input_pattern.asp

3. Support for a callback Function

If you have some JavaScript code that you want to run as soon as this script has done checking the input elements for errors. Then you can use the 'CallBackFunction' option. This option takes a function as a value. Here is a basic example:

function demoformInOrde(submitButton, container){
    alert("All the fields in the container '" + container + "' are filled in correctly!");
    return false;
}
$(document).ready(function(){
    $(".mySubmitButton").webforms({
         "CallBackFunction": demoformInOrde
    })
});

The name of the function 'demoformInOrde' can (obviously) be changed to anything you like. If you return false, the form will not be submitted. If you return any other value (or no value at all) then the form will be submitted. The function will only get called when there are no errors detected and it will automatically get 2 parameters send to it.

1. The first parameter is an object containing the submit button itself.
2. The 2nd parameter is a string containing the 'container' option that was passed to the script.

Feel free to leave any and all questions, feedback, etc... in the comments below.

Download

If you want to take a look at the code yourself (or give it a try), 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.2

Known issues:

• Not all input types are supported (yet).
• In browsers that don't support the 'color' input, the script 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

Webforms support for browsers with no webforms support

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:

1. (default) As an alert box. For example:
   
2. 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