Better understanding of FormValidation internals

[Jeff Butterworth]

I am trying to build some further validation on top of the FormValidator control. Generally its ok but I have some textboxes causing me a problem. As far as I can see they are set up the same:

This is a control that validates properly:

<div class="form-col-1">     
     <label id="label-employee-phone" for="employee-phone">Phone</label>     

     <ejs-textbox id="employee-phone" name="Phone"

         v-model="data.Phone"></ejs-textbox>

</div>

And this is one that doesn't:

<div class="form-col-1">     
     <label id="label-employee-tfn" for="employee-tfn">TFN</label>     

     <ejs-textbox id="employee-tfn" name="Phone"

         v-model="data.TFN"></ejs-textbox>

</div>

But the first one works and the second one doesn't. This is the generated html for the phone control (first one) with an error, which works:

<div class="form-col-1">

     <label id="label-employee-phone" for="employee-phone">Phone</label> 

     <span class="e-input-group e-control-wrapper e-valid-input">

          <input id="employee-phone" name="Phone" class="e-control e-textbox e-lib e-input e-error"

                  type="text" role="textbox" value="03 5550 3909" aria-invalid="true" 

                  aria-describedby="employee-phone-info">

          <span class="e-clear-icon e-clear-icon-hide" aria-label="close" role="button" 

               data-ol-has-click-handler=""></span>

     </span>

     <label class="e-error" for="Phone" id="Phone-info" style="display: block;">Error message</label>

</div>

This is the TFN (second one) which doesn't work.

<div class="form-col-1">

      <label id="label-employee-tfn" for="employee-tfn">Tax File Number</label> 

      <span class="e-input-group e-control-wrapper">

           <input id="employee-tfn" name="TFN" class="e-control e-textbox e-lib e-input e-valid"

               type="text" role="textbox" value="" aria-invalid="false" 

               aria-describedby="employee-tfn-info">

          <span class="e-clear-icon e-clear-icon-hide" aria-label="close" role="button" 

               data-ol-has-click-handler=""></span>

     </span>

     <label class="e-error" for="TFN" id="TFN-info" aria-invalid="false" style="display: none;"></label></div>

So the differences I can see is that the first span for the phone example has the "e-valid-input" class added to it. What adds this class? How come one has it and the other doesn't even though the rules are the same for both inputs?

Also in TFN example (second one) the label for the error has style="display: none;" . Why? Its added the error message as I would expect, but the display is not turned on. Am not sure if this is related to the e-valid-input class or not.

Any help would be appreciated.

Cheers

Jeff

[Sevvandhi Nagulan]

Hi Jeff, 

Greetings from Syncfusion support. 

We checked your query.  We could see that name attribute for both the controls is same. But we will validate the control based on the name attribute and corresponding rules. So provide the unique name attribute to each control and add the rules based on the name attribute in order to perform the validation.  Please refer the below UG documentation. 

UG Link: https://ej2.syncfusion.com/vue/documentation/form-validator/validation-rules/ 

Regards, 

Sevvandhi N 

[Jeff Butterworth]

Sorry. That was actually a cut and paste error while I was typing up the request. It is named differently in the real code. My questions still stand:

1. What adds the  "e-valid-input" class to the span.
2. Why would an error label be added with  "style="display: none;"  . The code has clearly added the error label just as it was supposed to but being display:none it doesn't show up. I am adding an error

[Sevvandhi Nagulan]

Hi Jeff, 

We checked your query. The “e-valid-input” class will be added to the component if validation is succeeded.  If validation fails, the component's "e-valid-input" classes are not added, and The validation message is moved to the hidden state. So please provide the full code of both textboxes as well as the rules added to the component using form validator or simple sample demonstrating your issue would be helpful to validate the issue further at our end.  

Regards, 

Sevvandhi N