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

[Juan Cruz]

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]

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> 

                    <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)) 

                                .Adaptor("UrlAdaptor").CrossDomain(true)) 

                            .Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings 

                            { 

                                Text = "Text", 

                                Value = "Value" 

                            }) 

                            .Placeholder("Seleccione") 

                            .PopupHeight("200px") 

                            .Width("250px") 

                            .Render() 

                        ) 

                    </div> 

                    <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> 

 

                    <div class="form-group"> 

                        <div> 

                            @Html.LabelFor(model => model.rangevalue, "Fecha Entrega") 

                            @Html.EJS().DateTimePickerFor(model => model.rangevalue).Format("dd-MMMM-yyyy hh:mm a").Render() 

 

                        </div> 

                    </div> 

                </div> 

                <div class="form-actions"> 

                    <div class="row"> 

                        <div class="col-md-12"> 

                            <button class="btn btn-default" type='button' id="btnCancel" onclick="CerrarForma()"> 

                                Cerrar 

                            </button> 

                            <button class="btn btn-primary" type="submit" id="btnSave"> 

                                <i class="glyphicon glyphicon-save"></i> 

                                Guardar Cambios 

                            </button> 

                        </div> 

                    </div> 

                </div> 

            } 

        </div>).Render() 

 

 

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  

 

Regards, 

Sureshkumar P 

[Juan Cruz]

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]

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. 

        $.ajax({ 

            type: "POST", 

            url: "/Home/_PartialView", 

            success: function (response) { 

                document.getElementById('partialTarget').innerHTML = response; 

                eval(document.getElementById('partialTarget').querySelector('script').innerHTML); 

                var options = { 

            rules: { 

                //must specify the name attribute value in rules section 

                'dropdownValue': { required: true }, 

                'Cantidad': { required: true }, 

                'rangevalue': { required: true } 

            }, 

            customPlacement: (inputElement, errorElement) => { 

                inputElement.parentElement.parentElement.appendChild(errorElement); 

            } 

        }; 

        var formObject = new ej.inputs.FormValidator('#FormContents', options); 

        formObject.validate(); 

            } 

        }) 

        dialogObj.show(); 

 

    }; 

 

 

We have modified the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/149666/ze/DateRangePicker1636733167  

 

Regards, 

Sureshkumar P