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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can I add a client-side validation on a form with Syncfusion components?

Thread ID:





149666 Dec 4,2019 07:33 PM UTC Dec 6,2019 11:36 AM UTC ASP.NET MVC - EJ 2 3
Tags: FormValidator
Juan Cruz
Asked On December 4, 2019 07:33 PM UTC

Hi, I'm creating a form in a dialog box with some fields that use Syncfusion components - like DropDownList and DateTimePicker. I need to add validation on the client side before sending to the server. Try using FormValidator but it doesn't work for me. What should I do to do the validation? I hope you can help me. I thank you in advance

Attachment: Question_d3519b25.rar

Sureshkumar P [Syncfusion]
Replied On December 5, 2019 06:35 AM UTC

Hi Juan, 
Greetings from Syncfusion support. 
Yes, we can validate client side using formvalidator. Kindly refer the below code example  
@Html.EJS().Dialog("dialog").Header("Form Validation").IsModal(true).Width("700px").ContentTemplate(@<div> 
            @using (Ajax.BeginForm("NuevoConsumible", "Preventivo", 
                        new AjaxOptions { HttpMethod = "Post", OnSuccess = "ConsumibleComplete", OnFailure = "ConsumibleFail", UpdateTargetId = "Nuevo" }, 
                        new { id = "FormContents" })) 
                    <div class="form-group"> 
                        @Html.LabelFor(model => model.dropdownValue, "Suministro") 
                        @(Html.EJS().DropDownListFor(model => model.dropdownValue) 
                            .DataSource(dataManager => dataManager.Url(Url.Action("DataCatConsumible", "Preventivo", new { area = "Mantenimiento" }, Request.Url.Scheme)) 
                            .Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings 
                                Text = "Text", 
                                Value = "Value" 
                    <div class="form-group"> 
                        @*@Html.LabelFor(m => m.Cantidad, "Cantidad")*@ 
                        @*@Html.TextBoxFor(m => m.Cantidad, String.Format("{0:0.00}",Model.Cantidad), new { @class="form-control", @type = "number" })*@ 
                        <input type="number" step="0.01" name="Cantidad" id="Cantidad" class="form-control" data-msg-containerid="inputError" required /> 
                        <div id="inputError"></div> 
                    <div class="form-group"> 
                            @Html.LabelFor(model => model.rangevalue, "Fecha Entrega") 
                            @Html.EJS().DateTimePickerFor(model => model.rangevalue).Format("dd-MMMM-yyyy hh:mm a").Render() 
                <div class="form-actions"> 
                    <div class="row"> 
                        <div class="col-md-12"> 
                            <button class="btn btn-default" type='button' id="btnCancel" onclick="CerrarForma()"> 
                            <button class="btn btn-primary" type="submit" id="btnSave"> 
                                <i class="glyphicon glyphicon-save"></i> 
                                Guardar Cambios 
We have modified your shared code and created sample based on your requirement (with dialog component). kindly refer the sample here: https://www.syncfusion.com/downloads/support/forum/149666/ze/DateRangePicker2052245572  
Sureshkumar P 

Juan Cruz
Replied On December 5, 2019 06:11 PM UTC

I have seen the example they gave and it works. Will it work if you had the html markup of the form in a partial view and that it fills the contents of the dialog box through an ajax request? Will the validation still work?

Sureshkumar P [Syncfusion]
Replied On December 6, 2019 11:36 AM UTC

Hi Juan, 
Yes, we can validate the form element through partial view inside the dialog component. Kindly refer the below code block. 
btnEle.onclick = function () { 
        // load the partial view content to dialog while open the dialog element. 
            type: "POST", 
            url: "/Home/_PartialView", 
            success: function (response) { 
                document.getElementById('partialTarget').innerHTML = response; 
                var options = { 
            rules: { 
                //must specify the name attribute value in rules section 
                'dropdownValue': { required: true }, 
                'Cantidad': { required: true }, 
                'rangevalue': { required: true } 
            customPlacement: (inputElement, errorElement) => { 
        var formObject = new ej.inputs.FormValidator('#FormContents', options); 
We have modified the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/149666/ze/DateRangePicker1636733167  
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon