Datepicker & Bootstrap 5 Client Side Validation

1 Answer 182 Views
Date/Time Pickers
Reafidy
Top achievements
Rank 1
Reafidy asked on 09 Jul 2023, 02:58 AM | edited on 09 Jul 2023, 05:19 AM

I am trying to get the bootstrap 5 client side validation (Red/Green borders) to work with the Datepicker. 

Currently using Jquery validation rather than Kendo because I am only using the Kendo Datepicker control, the rest are standard inputs.

       <partial name="_ValidationScriptsPartial" />

Whilst the validation fires correctly the .is-invalid pseudo class is added to the input only so the border doesn't render:

 

 

 

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 12 Jul 2023, 12:12 PM | edited on 18 Jul 2023, 01:11 PM

Hello, Reafidy,

The Kendo DatePicker consists of two elements, the inner input and the outer wrapper. In order for the above behavior to work, you need to somehow apply the style to the wrapping <span> element.

I tried with the following approach and it seems to do the trick, however please keep in mind that this is a customization and as such it hasn't been tested properly:

    <style>
      .form-control.is-invalid, .was-validated .k-datepicker:has(>.k-input-inner:invalid) {
        border-color: #dc3545;
        padding-right: calc(1.5em + .75rem);
        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='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
      }
    </style>

I would strongly advise that you use the Kendo Validator which is designed to work with the Kendo components.

Dojo

https://dojo.telerik.com/@gdenchev/isaliBiZ 

Best Regards,

Georgi

Reafidy
Top achievements
Rank 1
commented on 16 Jul 2023, 02:41 AM

Thanks,  that worked.  Do you want to post as an answer?
Georgi Denchev
Telerik team
commented on 18 Jul 2023, 01:13 PM

Hello,

I am glad the approach worked!

I've converted the reply into an answer.

Best Regards,

Georgi.

Tags
Date/Time Pickers
Asked by
Reafidy
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or