Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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='http://www.w3.org/2000/svg' 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='http://www.w3.org/2000/svg' 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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • 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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(