I follow your FAQ to configure a confirmation message but it doesn't work!
The validation works! Here is my template file and my css:
Template HTML:
<div id="content">
<div id="nav"><jdoc:include type="modules" name="suckerfish" style="rounded" /></div>
<div id="content_left"><?php if($this->countModules('left')) : ?><jdoc:include type="modules" name="left" style="rounded" /><?php endif; ?></div>
<div id="content_middle"><jdoc:include type="component" /><jdoc:include type="message" /></div>
<div id="content_right"><?php if($this->countModules('right')) : ?><jdoc:include type="modules" name="right" style="rounded" /><?php endif; ?></div>
</div>
CSS:
/* Form validation */
.invalid, input.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }
#system-message dt {font-weight:bold;}
#system-message dd {font-weight:bold;margin:0;text-indent:30px;}
#system-message{margin-bottom:10px;padding:0;}
#system-message dd ul {border-bottom:3px solid #84A7DB;
border-top:3px solid #84A7DB;
color:#0055BB;list-style-image:none;list-style-position:outside; list-style-type:none;margin-bottom:10px;padding:10px;}
#system-message dt.message,
#system-message dt.error,
#system-message dt.notice {display:none;}
#system-message dd.error ul {
background-color:#E6C0C0; border-bottom:3px solid #DE7A7B; border-top:3px solid #DE7A7B;color:#CC0000;}
#system-message dd.notice ul {
background:#EFE7B8 none repeat scroll 0 0;border-bottom:3px solid #F0DC7E; border-top:3px solid #F0DC7E;color:#CC0000;}
#system-message dd.message ul{
background:#C3D2E5 url(/../images/notice-info.png) no-repeat scroll 4px center;}
#system-message dd.notice ul{
background:#EFE7B8 url(/../images/notice-note.png) no-repeat scroll 4px center;}
#system-message dd.error ul{
background:#E6C0C0 url(/../images/notice-alert.png) no-repeat scroll 4px center;}