Datepicker & Bootstrap 5 Client Side Validation

[Reafidy]

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:

 

 

 

[Georgi Denchev]

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]

Thanks,  that worked.  Do you want to post as an answer?

[Georgi Denchev]

Hello,

I am glad the approach worked!

I've converted the reply into an answer.

Best Regards,

Georgi.