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.
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:
<img src="https://i.imgur.com/kDdfhCo.png" class="w-100" alt="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:
<img src="https://i.imgur.com/qA1GGqe.png" alt="" class="w-100"/>
<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.
