Smarter Form - Form validation: client side

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/