CSS Rules:
1- for text field:
input:required:valid {
border-color: #88a !important ;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5) !important;
-moz-box-shadow: 0 0 3px rgba(0, 0, 255, .5) !important;
box-shadow: 0 0 3px rgba(0, 0, 255, .5) !important;
}
input:required:invalid, input:focus:invalid {
border-color: #e88 !important;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8) !important;
-moz-box-shadow: 0 0 5px rgba(255, 0, 0, .8) !important;
box-shadow: 0 0 5px rgba(255, 0, 0, .8) !important;
}
2- for list of value field (If you wish):
select:required:valid {
border-color: #88a !important ;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5) !important;
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5) !important;
box-shadow: 0 0 5px rgba(0, 0, 255, .5) !important;
}
select:required:invalid, select:focus:invalid {
border-color: #e88 !important;
-webkit-box-shadow: 0 0 10px rgba(255, 0, 0, .8) !important;
-moz-box-shadow: 0 0 5px rgba(255, 0, 0, .8) !important;
box-shadow: 0 0 5px rgba(255, 0, 0, .8) !important;
}
Regular Expression:
^((\s*[a-zA-Z0-9\._%-]+@[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,4}\s*[,;:]){1,100}?)?(\s*[a-zA-Z0-9\._%-]+@[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,4})*$
pattern="........*"Bonus: how to correct user entry:
You create a process - After submit - and you use something similar to this::P19_MOBILE := regexp_replace(regexp_replace(':P19_MOBILE','\D'),'^0*') ;
References:
http://apex.oracle.com/pls/apex/f?p=38997:1:http://www.dba-oracle.com/oow_getting_regular_with_regular_expressions.pdf
http://www.the-art-of-web.com/html/html5-form-validation/
