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

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

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

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?

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();        };