Force dropdown validation on load

[Juan Acosta]

Hi,

I have a dropdownlist that loads dynamically with the values of the ViewBag. The values are loaded fine. However, I added some custom validation to the dropdownlist that should be active as soon as it is load inside the control.

I have this kind of declaration.

<div class="form-group">
<label for="AreaName">Area:</label>
<div style="text-align:left;">
@Html.EJ().DropDownList("areasListMaintenance").Datasource((IEnumerable<DocTracerPortal.Models.Visual.VisualArea>)ViewBag.areasSourceMaintenance).DropDownListFields(f => f.Value("value").Text("text")).Enabled(true).EnableRTL(true).Width("70%").WatermarkText("Select an Area").ValidationRules(r => r.AddRule("required", true)).ValidationMessage(m => m.AddMessage("required", "Area required "))
</div>
</div>
<div class="form-group">
<label for="DocumentStatusName">Status:</label>
<div style="text-align:left;">
@Html.EJ().DropDownList("documentStatusListMaintenance").Datasource((IEnumerable<DocTracerPortal.Models.Visual.VisualDocumentStatus>)ViewBag.dsSourceMaintenance).DropDownListFields(f => f.Value("value").Text("text")).Enabled(true).EnableRTL(true).Width("70%").WatermarkText("Select a Status").ValidationRules(r => r.AddRule("required", true)).ValidationMessage(m => m.AddMessage("required", "DocumentCategory required "))
</div>
</div>
<div class="form-group">
<label for="DocumentCategoryName">Category:</label>
<div style="text-align:left;">
@Html.EJ().DropDownList("documentCategoriesListMaintenance").Datasource((IEnumerable<DocTracerPortal.Models.Visual.VisualDocumentCategory>)ViewBag.dcSourceMaintenance).DropDownListFields(f => f.Value("value").Text("text")).Enabled(true).EnableRTL(true).Width("70%").WatermarkText("Select a Category").ValidationRules(r => r.AddRule("required", true)).ValidationMessage(m => m.AddMessage("required", "Document Status required "))
</div>
</div>

The page load fine and I don't have any errors in the js console.


Nothing is selected, it should show the required message?



However, the control should active the required fields on load. Unfortunately, that does not seem to work.

I was checking other links in the forums and no one knows how to make it work.

https://www.syncfusion.com/forums/119669/add-validation-todropdownlist

https://www.syncfusion.com/forums/125235/asp-net-mvc-dropdownlist-refresh-data-when-using-url-and-required-validation-rule
I added the default validation and nothing happens too.

Could you please help me with this. I do not want to make a full page load of the entire page be able to show the required messages.

Kind regards,

Juan Acosta

[Prince Oliver]

Hi Juan,   

  

Thanks for contacting Syncfusion support.   

  

We have analyzed your code. Dropdownlist control stores a value in hidden input and in jQuery validation hidden input are ignored from validating by default. So, we need to set jQuery validation to include hidden input validation in order to validate dropdownlist. Please refer the following code snippet.   

  

<script>   

    $.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"));   

        }   

    });   

</script>   

  

  

We have used your code and prepared a sample, refer to the following link for a sample:   

https://www.syncfusion.com/downloads/support/forum/127583/ze/validationdropdown-108288019   

  

Refer to the following UG Documentation for more information:   

https://help.syncfusion.com/aspnetmvc/dropdownlist/validation   

  

Let us know if you require any further assistance.   

  

Regards,   

Prince