We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Force dropdown validation on load

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

1 Reply

PO Prince Oliver Syncfusion Team November 28, 2016 11:52 AM UTC

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:   
  
Refer to the following UG Documentation for more information:   
  
Let us know if you require any further assistance.   
  
Regards,   
Prince   


Loader.
Live Chat Icon For mobile
Up arrow icon