HTML5 Form Validation Quirks: Opera, Chrome And Firefox

I decided to implement an HTML5 Form validation for one project I was working on recently, and came across several interesting quirks with the implementation across Opera 11.11, Chrome 12 Beta and Firefox 4.0.1.

First off, the basic thing I realized needed to do was check if validation worked at all, so I created my form, slapped on a few “required” attributes on some fields and fired of the form submission. Here is the basic form below along with the HTML and CSS references so we know what we are working with

<?php
echo $site->component->css('css/register.css');

echo $site->script('jquery/js/jquery.js');
echo $site->component->script('js/register.js');
?>

<form id="register_form" name="register_form" action="" method="post" enctype="application/x-www-form-urlencoded">
    <table width="90%" border="0" align="center" cellpadding="8" cellspacing="0"  id="register_table" >
        <tr>
            <td width="32%" align="right"> *Last name: </td>
            <td width="68%" colspan="4">
                <input type="text" name="last_name" id="last_name" required="required" class="required" />
            </td>
        </tr>
        <tr>
            <td align="right"> *First name: </td>
            <td colspan="4">
                <input type="text" name="first_name" id="first_name" class="required" required="required" />
            </td>
        </tr>
        <tr>
            <td align="right"> *Sex: </td>
            <td colspan="4">
                <select name="sex" id="sex" class="required" required >
                    <option value="">Select Gender</option>
                    <option value="Male" selected="selected">Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right"> *Email: </td>
            <td colspan="4">
                <input type="email" name="email" id="email" required="required" class="required" />
            </td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <label>
                    <input type="submit" name="register" id="button" value="Register" />
                    <input type="reset" name="reset" id="reset" value="Reset" />
                </label>
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(document).ready(function() {
	registration.init({
		url: '<?php echo $site->component->url('ajax/register.php'); ?>'
	});
});
</script>

And the CSS

/* CSS Document */

#register_table {

}

#register_table td {
	font-size: 11px;
}

#register_table input[type=text],
#register_table input[type=email]
#register_table select {
	font-size: 11px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 220px;
    border-radius: 3px;
    border: solid #ddd 1px;
    padding: 3px;
}

#register_table input[type=button],
#register_table input[type=submit],
#register_table input[type=reset] {
    padding: 10px;
}

#register_form :invalid {
	border: solid #900 2px !important;
}

Basic HTML  Form Validation

The basic requirement for validation, is to have some fields with “required” attribute set to them, and when you try to Submit the form, the browser handles the process of informing you if the field is required or not. Hence a simple JQuery snippet like  $("#register_form").submit(); should trigger the HTML Form Validation. Here is what is rendered in the various browsers to begin with:

Form With Required Fields

Opera Form With Required Fields

Firefox Form With Required Fields

Chrome Form With Required Fields

So far so good. Now if we do a normal form submission this is what we get with the various browser implementations:

Opera Form Validation

Firefox Form Validation

Chrome Form Validation

Excellent. Works as advertised on the box. Now, if we decide to use AJAX instead for form submission, we’ll need code similar to the following to achieve the basic requirement:

$("#register_form").submit(function(e) {
   registration.registerAlumni(); // handles the AJAX process
   e.preventDefault();
});

With the above code, here is the validation result

Form With Required Fields

Opera Form With Required Fields

Firefox Form Validation

Chrome Form Validation

As can be seen, the validation fails in Opera but works in Chrome and Firefox. This had me scratching my head for a while and even posted a bug to the Opera Desktop blog. But from searching around, here is the code that works in all the three browsers:

$("#register_form").submit(function(e) {
	// use HTML5 features if supported
	if( this.checkValidity ) {
		if( this.checkValidity() ) { // call the validation function
			registration.registerAlumni();
		}
	} 

	// default to raw js validation if not for older browsers
	else {
		var form_valid = registration.validateForm(); // fallback to some JS based validation

		if( form_valid ) {
			registration.registerAlumni();
		}
	}

	e.preventDefault();
});

This requires putting in place code to fallback to some Javascript based validation if the HTML5 functionality is not supported or being called by the browser.  So the validation now works across board again as with the normal form submission.

SELECT Form Element Validation

So far we are good. All invalid elements on the page are highlighted red to begin with, so we know what we must fix. However, a closer look reveals a quirk when you are filling in the content or when content is being validated. Consider the following images:

Form With Required Fields

Opera (left) Gender Field Not Highlighted, But Highlighted In Firefox and Chrome

Opera sees the Gender drop down list as valid, because something is selected, however Chrome and Firefox use the logic applied in common Javascript libraries and sees the Gender field as invalid, because the default selected item has an empty value.

I could not immediately find a solution or work around for that, perhaps someone can help.

EMAIL From Element Validation

Okay, so we know our email field is invalid because it is required and must be a valid email, now lets try filling it. This reveals a small quirk as to what each of the browsers considers a valid email

Opera's version of valid email format

Firefox's Valid Email Format

Chrome Invalid Email Format

Both Opera and Firefox accept “abc@abc” as valid, where as Chrome does not. It however accepts “abc@abc.com” as valid. I’m guessing Opera and Firefox must be following some standard, where as Chrome might not, or it may be the other way around. Will need clarification here.

Wrapping Up

So far, these are the few quirks I discovered and my form is not even yet complete :(. But it is nice to know that what each of my users will experience is different. I believe it will take time for all the experiences to merge as HTML5 Form adoption grows. Heck even wordpress is officially dropping support for IE6, so a day and time will come when we can work with modern browsers only.

About these ads

4 thoughts on “HTML5 Form Validation Quirks: Opera, Chrome And Firefox

  1. Pingback: HTML5 Blog on: HTML5 Form Validation Quirks: Opera, Chrome And Firefox | MiloRiano: Computers news, tips, guides...

  2. Ben Halhead

    There appears to be an issue in Opera whereby if you use a font from Google Font Directory or indeed one linked to via @font-face, the validation text is lost. Also, it renders the datalist element useless as it blacks out all the options! Clearly an issue with not being able to support non-standard fonts but very annoying. I have opened a bug on the subject with the Opera team. ALSO, in Chrome if you use positioning on any element on the page that lies above the hierarchy of your from, the validation messages will not appear in the correct places. By default the HTML5 validation messages should appear next to the relevant form element, however when using position relative the messages can appear several hundred pixels off the page! Again a bug has been opened however Google dev team members have indicated this bug will not be fixed until version 14 or 15. We are currently on version 13.

    In summary, be very careful with HTML5 and forms as there are many many bugs still to be solved in all browsers.

    Reply
    1. Francis Adu-Gyamfi Post author

      Hear, hear!!! I have personally experienced the Chrome validation message position bugs and as such I’m a little reserved on using Chrome for HTML5 forms. Hopefully, Opera Devs will have the @font-face issues fixed for release 12. You check out the development blog for the latest releases here: http://my.opera.com/desktopteam/blog/

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s