form-validation map
Created by: philcon93
Hey all,
I wanted to see what everyone thought about updating the existing form-validation-state
(_forms.scss
) to use maps (or another method if you got one).
I am using the validation states on a checkout form and when the forms gets the class was-validated
, it makes the form look like an tacky Christmas tree. My users do not need to have the positive valid feedback, a lot of the form elements are optional with no patterns so Bootstrap/ the constraint validation api intepretated that as a valid input so it displays that all attention focusing green. I shouldn't be forced to add in those html5 attributes because of the limitation of the css framework either. I can't update the valid include of form-validation-state
to use a different colour either, as it changes input borders and labels to the same colour; which are different colours by default and in my design.
What I propose is to give developers the ability to remove these if desired, e.g add a map and then loop that map:
$form-validation: () !default;
$form-validation: map-merge((
"valid": $form-feedback-valid-color,
"invalid": $form-feedback-invalid-color
), $form-validation);
@each $type, $value in $form-validation {
@include form-validation-state($type, $value);
}
Then developers could easier remove one if needed:
$form-validation: map-remove($form-validation, "valid");
This isn't so developers can add custom validation states such as 'warning', but to give the ability to remove the existing states. I really don't want to, but I am going to have use my own custom version of _forms.scss
, which doesn't have @include form-validation-state("valid", $form-feedback-valid-color);
or probably the solution stated above.
I would love to know what you all think,
Cheers!