Validation Fires on Focus

chepp
OFFLINE
Posts: 20
Thanks: 1
Karma: 0

8 years 7 months ago #278575 by chepp

Validation Fires on Focus was created by chepp

I just updated my test site from 1.9 to 2.0.13. Now every time I tab into a required field it flags the entry as an error. It will go away as soon as I start typing unless there is another condition. For example, I receive an error for the first five characters I type if the field has a minimum of 6 characters. Same goes with e-mail fields - errors until finished typing.

Is there a way to have the validation fire on exiting the field instead of on entry?

Thanks

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48460
Thanks: 8280
Karma: 1443

8 years 7 months ago - 8 years 7 months ago #278601 by krileon

Replied by krileon on topic Validation Fires on Focus

Validation will execute on tabbed focus (on click focus will not trigger it). It's to be accessible compatible (for disabled persons.. readers.. touch devices.. keyboard only navigation). No, there are no plans to change this and no there's no way to turn it off. Joomla registration will do the same behavior as well. Validating on input for text fields is also best practice so they know how to complete the input. It wouldn't be fun to type 3 characters, exit the input, it error, then have to go back to it.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Last edit: 8 years 7 months ago by krileon.

Please Log in or Create an account to join the conversation.

chepp
OFFLINE
Posts: 20
Thanks: 1
Karma: 0

8 years 7 months ago #278620 by chepp

Replied by chepp on topic Validation Fires on Focus

Seems to me akin to a teacher handing a student a blank paper with an F on it and telling them it will only change if they write the essay correctly. It's no fun being told you failed before you start either. I suppose we'll just have to agree to disagree.

Is there a way to change the red to a green and the red X to an green exclamation so it look like you are helping rather than scolding?

Thanks

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48460
Thanks: 8280
Karma: 1443

8 years 7 months ago - 8 years 7 months ago #278626 by krileon

Replied by krileon on topic Validation Fires on Focus

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";
}

Last edit: 8 years 7 months ago by krileon.

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon