Wednesday, July 13, 2011

XPages: Styling required and invalid fields

Just discovered that in Domino 8.5.2 (not sure about previous releases), invalid fields get the attribute aria-invalid=true, and required fields aria-required=true.

That makes it easy to style in modern browsers (>IE6).

Simply add a couple of style rules (just an example):
[aria-required=true] { background-color: #ffe; }
[aria-invalid=true] { background-color: #fee; border-color: red; }

Valid - required fields "highlighted"


Invalid


+1 to IBM for implementing :)

Share and enjoy!

6 comments:

Julian Buss said...

great find, Tommy!

Paul S Withers said...

Great tip and great timing. It answers a query I had from a customer yesterday

David Gilmore said...

- dojo uses this; I surmise that's the source of it, but IBM could be mimicking dojo because it's integrated with XPages.

Tommy Valand said...

Thanks :)

@David: It's a W3C standard that has nothing to do with Dojo. The WAI-ARIA standard is used for accessibility. E.g. for screen readers.

I think it's great that IBM has implemented this. Too bad IBM has so little documentation when it comes to features. I bet there are more "hidden" gems that might never be used because so few people know about them.

Mark Leusink said...

Cool stuff !

I tried adding an "invalid" image next to input fields that didn't pass validation using the :after CSS pseudo selector but that didn't work. Using dojo however that's easy to do:


<script type="text/javascript">
 dojo.addOnLoad( function() {
   dojo.query("[aria-invalid=true]").forEach(function(input){
   //dojo.create( "img", {src : "/icons/vwicn150.gif", style : "padding-left: 3px;", alt : "Required field", title : "Required field"}, input, "after");
   dojo.create( "span", { innerHTML : "!", style : "padding-left:3px; font-weight: bold; color:red"}, input, "after");
   });
 });
</script>

Tommy Valand said...

It looks like Opera might be the only one that (partially) supports :before/:after on inputs.

You could put the ! inside the field/add padding (so that value doesn't cover the icon) like Dojo does on their validation. E.g.

[aria-invalid="true"] {
background: url("/icons/vwicn150.gif") no-repeat 100% 50%;
border: 1px solid red;
padding-right: 14px;
}