Bug - Invalid Validation is not showing in Metronic 8.0.36

Hi Keenthemes,

After upgrading from 8.0.34 to 8.0.36, the invalid message for input group are not showing,

I may know the reason, it"s when you updated the text color inside input-group lately changed. (wich is looking goood), but it maybe this update on input-group affected the css reposnsible for the invalid section.

here the invalid validation input-group :
this is 8.0.34 : https://ibb.co/gr8xpnC

this is 8.0.36 (The bad render): https://ibb.co/r609JXb

NB : Just to let you know that in either version the Div class="fv-plugins-message-container invalid invalid-feedback"
is showing normaly just in the 8.0.36, no visible red text showing.

thank you.

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 (11)

Hi,

Appreciate it if you can provide your code to reproduce this bug ?
On our end, there were no changes that can break the validation state display.

Regards

Hi Sean thank you for the quick reply.

but the code is the same, because it comes from the server (Django form validation). it will always be the same, but the red error validation now are not shown ("This field is required.") wich is in the div below. but they were in 8.0.34

I think it is a CSS that cause this when you fixed input-group input text color.

But as you asked, here is the form snipet of the images I sent below :

<div class="row">

<div class="col-lg-6">

<!--begin::Input group-->
<div class=" mb-5 ">

<label for="id_prenom" class="fs-5 fw-bold mb-2 ">
<span class=" required ">First Name</span>
</label>

<div class="input-group input-group-solid ">
<input type="text" name="prenom" maxlength="45" class=" form-control border-danger is-invalid" value="" required="">
</div>
<!--end::Input group-->

<div class="fv-plugins-message-container invalid invalid-feedback">
This field is required.
</div>

</div>
<!--end::Input group-->

</div><!--end::col-lg-6-->


<div class="col-lg-6">

<!--begin::Input group-->
<div class=" mb-5 ">

<label for="id_nom" class="fs-5 fw-bold mb-2 ">
<span class=" required ">Last Name</span>
</label>

<div class="input-group input-group-solid ">
<input type="text" name="nom" maxlength="45" class=" form-control border-danger is-invalid" value="" required="">
</div>
<!--end::Input group-->

<div class="fv-plugins-message-container invalid invalid-feedback">
This field is required.
</div>

</div>
<!--end::Input group-->

</div><!--end::col-lg-6-->

</div>

thank you.

Hi,

I used your code with Metronic v8.0.36 and it renders the Bootstrap validation states as expected:

image

Regards

Have you tried it in an input-group (with icons)... :
https://preview.keenthemes.com/metronic8/demo1/documentation/base/forms/input-group.html

not the regular form input ??

Please let me know, because it is working for me in simple raw input, but not in input-group .


thank you

Hi Sean,

Please could you supply the validations state at the end of the page for the input-group, please:
https://preview.keenthemes.com/metronic8/demo1/documentation/base/forms/input-group.html

Please,

I was tearing my hair to make it work, but ... ?
It worked in 8.0.34 Once I updated to 8.0.36 it stopped rendering the errors.

thank you.

Hi,


Can you please double-check your code if you are using the validation classes and markup as per Bootstrap 5 docs?

All bootstrap 5 validation states for input groups should be working fine in Metronic v8.0.36:

<div class="input-group has-validation">
<span class="input-group-text" ><i class="bi bi-alarm fs-3"></i>
</span>

<input type="text" class="form-control is-invalid" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required />

<div class="invalid-feedback">
Please choose a username.
</div>
</div>

Regards

Hi Sean,

Thank you so much for the last code, it was very helpfull,

It seems that you change a bit a html source a bit,

I used your code and it renders well in my project,

Now I have to adjut this layout for all my html input validation.

Thank you.


Could you whe you change some html, please inform us in the changelog, just to be aware


Thank you Sean

Hi,

Sure, we will inform you. Also, you can always refer to the latest Bootstrap 5 doc as our released code always compatible with the latest Bootstrap 5.

Regards

Hi Sean,

Sorry to dig that up,

Could you please, try to put "input-group-solid" to this example that you supplied.

<div class="input-group input-group-solid has-validation">
<span class="input-group-text" >
<i class="bi bi-alarm fs-3"></i>
</span>


<input type="text" class="form-control is-invalid" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required />


<div class="invalid-feedback">
Please choose a username.
</div>


</div>


it worked for normal input but not for solid-input., here my rendering with normal input :
https://ibb.co/f8vC2vC


here my rendering with solid-input (since we use massivly solid-input, in our app).
https://ibb.co/f8vC2vC

Please could you try it with the last example that you gave me.

thank you.

Good spot. We will provide the fix in the next update very soon. Thanks!

No problem Sean,

Thank you so much for the next fix.

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  :(