Form validation DropDownList required

[Stephan Schrade]

Hi support,

within my form I want to set a dropdownlist to be required.

To make this work I have to add an option with an empty value like

<option value="">--Please select--</option>

In my database the default value for this property is also set to an empty string.

But when I load the dropwdownlist like this

var listObj5 = new ej.dropdowns.DropDownList({

value: '<?=$model->inputenabled?>',

placeholder: '<?=Yii::t('challengeevent', 'Input Enabled')?>',

popupHeight: '200px',

floatLabelType: 'Auto'

});

listObj5.appendTo('#challengeevent-inputenabled');

the dropdownlist is empty (does not show --Please select--).

If I set the value in the database to a value which is listed in my option list (and is not empty) the value can be seen in the dropdownlist.

What can I do?

Is there another way to set required to the dropdownlist?

Regards,

Stephan

[Sevvandhi Nagulan]

Hi Stephan, 

Greetings from Syncfusion support. 

We have checked the reported requirement. We would like to inform that when you set the empty string(“”) to the value property of DropDownList component, the value will set as empty in the component and text will be null. So placeholder will be shown when the value is empty.  

But in the Html 5 select element the value attribute in the background and text element will be shown. So at that time text will be shown even the value is empty.  

Also, as of now we have added the required validation when the value is empty string. Please refer the below sample, 

Sample Link: https://stackblitz.com/edit/ekzh9a-xd3yia?file=index.js 

Regards, 

Sevvandhi N 

 

[Stephan Schrade]

Hi Sevvandhi,

many thanks for your quick answer.

You solved the problem in setting the first entry to an empty value.

But this does not solve my case.

How can I see in the database if the user has made a selection if one entry has an empty value?

Every option must have a non empty entry in the value, otherwise this will not work.

Regards,

Stephan

[Sevvandhi Nagulan]

Hi Stephan,  

We can get the selected items from the select event args. Kindly refer the below code,  

 

  select: function(e) {  

            console.log(e.itemData);  

        }  

 

By using the itemData we can check whether the text and value property is null or not.  

Sample Link: https://stackblitz.com/edit/ekzh9a-xd3yia?file=index.js  

If we misunderstood your requirement, kindly share the issue demonstrating video or screenshot or sample. This will help us to proceed further. 

Regards,  

Sevvandhi N