the form is submitted. Using just a little CSS, we can provide instant feedback
to users.We simply use the pseudoclasses :valid and :invalid in some style declarations:
html5_validation/stylesheets/style.css
input[required]:invalid,input[pattern]:invalid{
border-color:#A5340B;
}input[required]:valid,input[pattern]:valid{
border-color:#0B9900;
}Now when our users change the contents of the fields, they’ll get some visual
feedback.Falling Back
The simplest fallback solution is to do absolutely nothing. Browsers will ignore
the required and pattern attributes, so you can let your server-side validation
catch any errors. But if you want to do better than that, you can use the
values of the required and pattern attributes to build your own validation. Or
you can use a library like H5F, which is incredibly robust and which you can
drop onto your page and activate.^7 And unlike with other libraries, there’s no
need to do browser detection, because it automatically detects and leverages
any existing browser support.To use this library, we need to include it and activate it. We’ll use Modernizr
again to detect the feature and load the library. Even though H5F does its
own detection, we still want to minimize loading external scripts, and we’re
already using Modernizr for the placeholder fallbacks. We can modify our
existing load() function like this:html5_validation/javascripts/fallbacks.js
➤ Modernizr.load([
{
test:Modernizr.placeholder,
nope:"javascripts/jquery.placeholder.js",
callback:function(url,result){
if(!result){
applyPlaceholders();
}
}
}
➤ ,report erratum • discussValidating User Input without JavaScript • 57
Download from Wow! eBook <www.wowebook.com>