Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Suggestion: Metronic: is-valid / is-invalid state expansion


Hey Guys,
Just a quick one regarding form elements and the current is-valid (green/success) and is-invalid (red / danger) states (with the attached invalid-feedback child div).
Sometimes its neither right or wrong, for example, a warning or 'info'/'notice' information.

In my specific case, I wanted the input field to turn orange just to give the user a heads up and made 'is-warning' and 'warning-feedback' classes (copy/paste of existing classes and just changed colours) to achieve the desired output.
You may want to take things further though and implement things like is-primary / is-info / etc.

My example code:
/*begin: is-warning, duplicate is-invalid with colour change / name change*/
.warning-feedback {
display: none;
width: 100%;
margin-top: 0.5rem;
font-size: 0.95rem;
color: var(--bs-warning-text);
}

.warning-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.75rem 1rem;
margin-top: 0.1rem;
font-size: 1rem;
color: #fff;
background-color: var(--bs-warning);
border-radius: 0.475rem;
}

.was-validated :invalid ~ .warning-feedback,
.was-validated :invalid ~ .warning-tooltip,
.is-warning ~ .warning-feedback,
.is-warning ~ .warning-tooltip {
display: block;
}

.was-validated .form-control:invalid, .form-control.is-warning {
border-color: var(--bs-warning);
padding-right: calc(1.5em + 1.55rem);
background-image: url("data:image/svg+xml,%3csvg xmlns=' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc700'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc700' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.3875rem) center;
background-size: calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-warning:focus {
border-color: var(--bs-warning);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-warning {
padding-right: calc(1.5em + 1.55rem);
background-position: top calc(0.375em + 0.3875rem) right calc(0.375em + 0.3875rem);
}

.was-validated .form-select:invalid, .form-select.is-warning {
border-color: var(--bs-warning);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-warning:not([multiple]):not([size]), .form-select.is-warning:not([multiple])[size="1"] {
--bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns=' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc700'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc700' stroke='none'/%3e%3c/svg%3e");
padding-right: 5.5rem;
background-position: right 1rem center, center right 3rem;
background-size: 16px 12px, calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-warning:focus {
border-color: var(--bs-warning);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}

.was-validated .form-control-color:invalid, .form-control-color.is-warning {
width: calc(3rem + calc(1.5em + 1.55rem));
}

.was-validated .form-check-input:invalid, .form-check-input.is-warning {
border-color: var(--bs-warning);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-warning:checked {
background-color: var(--bs-warning-text);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-warning:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-warning ~ .form-check-label {
color: var(--bs-warning-text);
}

.form-check-inline .form-check-input ~ .warning-feedback {
margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-warning,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-warning,
.was-validated .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-warning {
z-index: 4;
}
/*end: is-warning*/


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Thank you for sharing this. We will check this further and consider implementing it.
Probably Bootstrap has core mixing to add custom states easily.

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(