How to make dropdownlist mandatory?

[Jane]

I've seen a few threads about this for asp.net and the Kendo UI javascript dropdownlist but the solutions don't really apply to the JSP dropdownlist.

I want to make my dropdownlist mandatory as below.

<kendo:dropDownList name="status" dataTextField="domainValue" dataValueField="domainId" optionLabel="Please Select..." required="required">
   <kendo:dataSource data="${projectStatus}"></kendo:dataSource>
</kendo:dropDownList>

 

However, because Kendo renders the actual input field as hidden, then the error message displays in the top left of the browser.  How do I get it to display on the dropdown?

[Stefan]

Hello Jane,

I can suggest trying the approach described in our documentation for positioning the tooltip. This approach can be used to ensure that the tooltip will be placed as expected:

http://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-tooltip

Still, please have in mind that sometimes depending on the scenario and additional custom styles this approach may not achieve the desired result. In these scenarios, I can suggest sending us a runnable example, so I can investigate it locally and provide a suggestion best suited for it.

Regards,
Stefan
Telerik by Progress

[Jane]

Thanks Stefan, unfortunately I can't get that approach to work for the JSP tag.

My html is

<kendo:dropDownList name="status" dataTextField="domainValue" dataValueField="domainId" optionLabel="Please Select..." required="required" >
                <kendo:dataSource data="${projectStatus}"></kendo:dataSource>
</kendo:dropDownList>
<span class="k-invalid-msg" data-for="status"></span>

and this results in the following markup

<span class="k-widget k-dropdown k-header" style="" title="" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="status_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="c726af87-9caa-4a34-983c-e5f6a8acaeab">
<span class="k-dropdown-wrap k-state-default" unselectable="on">
<span class="k-input" unselectable="on">Please Select...</span>
<span class="k-select" aria-label="select" unselectable="on">
</span>
<input id="status" required="required" name="status" data-role="dropdownlist" style="display: none;">
</span>
<script>
<span class="k-invalid-msg" data-for="status"></span>

 

This final span is not rendered on the page (It's greyed out when I look at it using Firebug).

Do I need to explicitly call the Kendo validator to get this to work?  I'm doing an ajax submit and I'd rather not have to.  My other plain HTML5 input fields with the required attribute just work.

Thanks for your help, Jane

[Stefan]

Hello Jane,

The described scenario is not a known issue and it was not reproduced in my testing scenario.

Could run please provide a runnable example, or demonstration how the validation is handled, so I can test it locally, and provide a suggestion best suited for it.

I will be expecting the example to continue my investigation.

Regards,
Stefan
Telerik by Progress

[Jane]

Thanks Stefan,

Unfortunately I don't have the time just now to write a new webapp to demonstrate this problem.  I'll just have to find a solution myself.  I'm not actually doing any implicit validation on the page with the dropdowns, I'm just letting the browser html5 validator do it's thing.  In the past, I've found that the Kendo UI validator replaces its useful messages with less useful ones, e.g. a required numeric will get a message asking to enter a required field rather than asking for a valid number. 

[Stefan]

Hello Jane,

I hope you can find a solution to the issue.

Please have in mind that I did demonstrate our validation because the widgets are using hidden inputs which are causing this issue with the standard HTML validation. Still, a similar issue can be observed with our validation as well, but the article provided earlier can help easily fixing them.

Regards,
Stefan
Telerik by Progress

[Jane]

Hi Stefan,

I've finally had time to cobble together a standalone app. to demonstrate my problem. However I'm not able to upload it here because the file limit is 2mb.  My war file is 6.2mb but the kendo-taglib-2016.3.1118.jar alone is 2.0mb so I'm never going to be able to get it under the limit.

Can you please tell me the best way to get this war file to you?

Thanks for you help,

Jane

[srbam]

tebrikler sikişiçin başarılı olmuş

[Stefan]

Hello Jane,

In this scenario, I can suggest to either host the archive using a hosting service site or to open a support ticket where the allowed size is 20MB.

We will be expecting the example and will gladly assist.

Regards,
Stefan
Telerik by Progress