Can the normal validators visual look be changed?

Can the normal validators visual look be changed?

  
Hello all

I was wondering if the platform validators look and feel can be in some way changed to a more user friendly look, in the same manner António Chinita turned the regular feedback messages that come out of the box in the platform into a Growl alike feedbacks

Basicly turn this


into this


This ones I mention are from The CSS Ninja (http://www.thecssninja.com/javascript/h5f) live demo @ http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html

B
est regards,
PC
Hi Pedro,

Sure, just add this CSS to your eSpace theme:

span.ValidationMessage {
  border-radius: 5px;
  margin-left: 15px;
}
 
input.Not_Valid, 
select.Not_Valid, 
textarea.Not_Valid {
  border: 2px solid orange;
}


You can check the default CSS in the Validation section of the Black theme in RichWidgets. You can override all settings in you theme CSS.

Cheers,
Tiago Simões
 
Hi Tiago, thx for the reply. Even though that helps, I was wanting something more in the likes of changing the way the validations appears itself.

If you see the example I provided, for instance the error/validation messages are not embedded in the html of the form, they appear as a overlay. The current OS validators mess up the tables when the messages are shown, which I always considered awful to be honest.

Best regards,
PC
This is just a guess, but maybe if you add position: absolute; to the validation CSS, it won't stretch your page.
Hi Pedro,

On that example most of the stuff is only using the HTML 5 forms features and using that H5F javascript to emulate them on browsers without support.

So if you disable the Validations on the button of your page.
The rest you can do with a little jQuery code to add all the html5 code (or just extended properties + unescaped expressions ..but i guess thats way too messy).

But please be carefull, because if you do that you need to do something against someone disabling javascript and/or editing the page and submiting the form with bad information!
Browser based security = Bad Idea
So make sure you make all the validations on server side also and just send a feedback message or something if something is wrong.

Regards,
João Rosado
Hi João

I understand what you're going with, but it's not my intention to create a set new of validators to replace the out of the box ones... I just wish the out of the box could be cool like those...

It's a user experience thing, which OS is making an effort to be at the very top, and since HTML5 and CSS3 are now part of the platform itself would be awesome to have new, cool validators.

Lets be honest, everyone has experienced at some point making a page (popups are very good examples of this) and the validators when shown make the page awkward and clumsy (sliebars and what not)

Validators like this, with overlays and being inside the textboxes and all that would be a real nice improvement in the U X.


And of course, personalization to the validators (like the steps you shown in your first answer on the topic)

Best regards,
PC
Hi Pedro,

Like I said, all of that is HTML5 stuff, try adding a required extended property to an input in your page and using the css from that example.
All of that works just with that even without the javascript. (on browsers with built-in HTML5 support).

I know that the platform supports HTML5, but since we also support many browsers that don't theres some current limitations to what we can inject to the pages automatically. Also doing some of those changes would break existing pages.

I'm not going to do a step by step on this one.
Check HTML5 Validators documentation and the source of that example page.

Regards,
João Rosado