Form Validator On Hidden Parent

[Ardea Bagas]

Hello,

How to skip validator when parrent is hidden=true or v-show=false, im try using Form Validator, but the validator still checks even though his parents are hidden.

im using code like this

template

   <div class="row" id="myPnl">

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

        <div class="my-component">

          <ejs-textbox

            placeholder="Account Name"

            name="AccountName"

            :required="true"

            :value="data.BSAccountName"

            ref="refAccountName"

          >ejs-textbox>

          <div class="error-element">div>

        div>

        <div class="my-component">

          <ejs-textbox

            placeholder="Bank Name"

            name="BankName"

            :required="false"

            :value="data.BSBank"

          >ejs-textbox>

          <div class="error-element">div>

        div>

      div>

      <div class="col-md-6" :hidden="true">

        <div class="my-component">

          <ejs-textbox

            placeholder="Jenis Rekening"

            ref="refJenisRekening"

            name="JenisRekening"

            :required="true"

            :value="data.BSOwnerType"

          >ejs-textbox>

          <div class="error-element">div>

        div>

        <div class="my-component">

          <ejs-textbox

            placeholder="Currency"

            name="Currency"

            :required="true"

            :value="data.BSCurrency"

          >ejs-textbox>

          <div class="error-element">div>

        div>

      div>

    div>

Variable

validRules: {

                customPlacement: function (inputElement, errorElement) {

                    inputElement = inputElement

                        .closest(".my-component")

                        .querySelector(".error-element");

                    inputElement.parentElement.appendChild(errorElement);

                },

                rules: {},

            },

the function

saving: function () {

      this.isvalidRules = new FormValidator(

        "#myPnl",

        this.validRules

      );

      var valid = this.isvalidRules.validate();

      if (valid) {

        this.$swal({

          icon: "success",

          title: "Saving Success",

          showConfirmButton: false,

          timer: 1500,

        });

      }

    },

Thanks a lot

[Sevvandhi Nagulan]

Hi Ardea, 

Greetings from Syncfusion support. 

We checked your query. We can ignore the validation for specific element using ignore property. Add the “e-hidden” class to the control which you want to ignore the validation. Refer the below code. 

<div class="col-lg-8" :hidden="true"> 

    <ejs-textbox 

      id="textbox1" 

      name="text1" 

      class="e-hidden" 

    ></ejs-textbox> 

  </div> 

  

Please find the sample below. 

Sample link: https://codesandbox.io/s/form-validation-n3tgl?file=/src/App.vue:365-559 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Ardea Bagas]

Thank you for your feedback. I believe my problem is that I have to add using an ignore property. but now i use validationStart event to ignore the validation, if element offsetHeight = 0, then args.param=false, and I think it works for now, So problem has been solved because of your suggestion. thank you very much for the response!

[Sevvandhi Nagulan]

Hi Ardea, 

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N