Form Validation

[Hussain]

Hello,

It's actually difficult to extract information I need from the documentaion. Please take this into consideration.

However, I want to add form validation to the dropdown comoponent. I tried this:

<input type="text" class="form-control  d-inline" id="activityType" name="activityType" ej-dropdownlist [dataSource]="activityTypesData" [fields]="activityTypesFields" [validationRules]="validationRules" [validationMessage]="validationMessageA" width="100%" filterBarPlaceholder="Filter by activity type name" [(value)]="activity.activityTypeID" (actionBegin)='onActionBegin()' (actionFailure)='onActionFailure()' (actionComplete)='onActionComplete()' [enableFilterSearch]="true" [filterType]="type" [htmlAttributes]="activityTypesListHtmlAttr" />

I used validationRules attribute but it didn't work. Please advise.

Thanks.

[Keerthana Rajendran]

Hi Hussain, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared a sample based on your requirement for DropDownList Validation. Please download the sample from  

  

 http://www.syncfusion.com/downloads/support/forum/134620/ze/DDL-1613712430 

 

When you initialize the DropDownList widget, it creates an input hidden element which is used to store the selected items value. Hence, the validation is performed based on the value stored in this hidden element.  

 

HTML: 

<form id="form1"> 

        <input ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" type="text" id="dropdown1" [validationRules]="validRule"  [validationMessage]="validMessage"  [enableFilterSearch]="true" /> 

    

        <input type="submit" value="Validate" /> 

    </form> 

 

 

We suggest you to add the below validation code to get error messages during validation  

 

TS: 

 

  $['validator'].setDefaults({ 

        ignore: [],// To include hidden input validation. 

        errorClass: 'e-validation-error', // to get the error message on jquery validation 

        errorPlacement: function (error, element) { 

            $(error).insertAfter(element.closest(".e-widget")); 

        } 

    }); 

 

this.fieldsvalues = { dataSource: this.data, text: 'text', value: 'value' }; 

      this.validRule={ 

      required: true      

}; 

this.validMessage={ 

  required: "* Required" 

   

}; 

 

 

 

 

Also, ensure whether the jquery.validate script has been referred in your sample which is required for validation. We will include validation topic in angular document and update UG in future document improvement. 

 

 

Regards, 

Keerthana. 

[Hussain]

Thanks Keerthana.

[Keerthana Rajendran]

Hi Hussain, 

 

Most Welcome. Please get back to us if you require any further assistance on this. We will be happy to assist you. 

 

Regards, 

Keerthana.