That's only the case if you're tab navigating. The reason we do this is exampled above. It improves accessibility. Facebook even does this for their registration. The bottom line is our implementation is UX sound and backed by years of research. So I really don't want to argue here about what is best.
With that said this is your site though and you are more than welcome to customize it how you see fit. The only way to change the validation errors to information or success messages is to completely result the error classes. The below styling may better fit your needs by styling it to a blue info display. The orange warning color for Bootstrap would also likely be acceptable.
Code:
.cb_template.cbRegistration .has-error .help-block,
.cb_template.cbRegistration .has-error .control-label,
.cb_template.cbRegistration .has-error .radio,
.cb_template.cbRegistration .has-error .checkbox,
.cb_template.cbRegistration .has-error .radio-inline,
.cb_template.cbRegistration .has-error .checkbox-inline,
.cb_template.cbRegistration .has-error.radio label,
.cb_template.cbRegistration .has-error.checkbox label,
.cb_template.cbRegistration .has-error.radio-inline label,
.cb_template.cbRegistration .has-error.checkbox-inline label {
color: #31708f;
}
.cb_template.cbRegistration .has-error .form-control {
border-color: #31708f;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.cb_template.cbRegistration .has-error .form-control:focus {
border-color: #843534;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #bce8f1;
}
.cb_template.cbRegistration .has-error .input-group-addon {
color: #31708f;
border-color: #31708f;
background-color: #d9edf7;
}
.cb_template.cbRegistration .has-error .form-control-feedback {
color: #31708f;
}
.cb_template.cbRegistration .text-danger {
color: #31708f;
}
.cb_template.cbRegistration .cbValidationIcon.fa-times:before {
content: "\f129";
}
krileon
