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!