How can I apply validators ?

[Sandra Bordier]

Dear support,

In my modal I would like to check many input with validators as email, date, maxlength ...

When I try this :

<div class="error-element">

<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12" form-group>

<ejs-textbox

id="last_name"

required

floatLabelType="Auto"

placeholder="Pénom *"

v-model="form.last_name"

/>

div>

div>

It works perfeclty. However, if I try this :

<div class="error-element">

<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12" form-group>

<ejs-textbox

id="last_name"

required

email

floatLabelType="Auto"

placeholder="Pénom *"

v-model="form.last_name"

/>

div>

div>

It doesn't work. I don't know how to apply some validators rules but required.

Can you help me ?

I would like to apply :

-Email validator
- Date validator, when I would like to check if the date is "yyyy-mm-dd"
- MaxLength : 5

Moreover, if for instance my maxLentgh is 5, how do I set the error message ? 
In the documentation it is written "Please enter no more than {0} characters."
Where do I have to write this ? DO I have to keep the "0" ? How can I make the "0" dynamic to as to take the value tha I will fill in my rule validator ?

Thank you in advance !

[Ponmani Murugaiyan]

Hi Sandra, 

Thanks for contacting Syncfusion support. 

We suggest you to validate the TextBox component using the FormValidator plugin to achieve your requirement like (required, email, maxlength, date). For more information, please find the documentation link below. 

https://ej2.syncfusion.com/vue/documentation/form-validator/validation-rules/#default-rules 

 

import { FormValidator } from "@syncfusion/ej2-inputs"; 

 

Vue.use(TextBoxPlugin); 

export default { 

  data: function () { 

    return { 

      formObj: "", 

      options: { 

        customPlacement: function (inputelement, errorElement) { 

          var parentElement = inputelement.closest(".form-group"); 

          parentElement.appendChild(errorElement); 

        }, 

        rules: { 

          text: { 

            required: true, 

            maxLength: 5, 

            email: true, 

          }, 

        }, 

      }, 

    }; 

  }, 

  mounted: function () { 

    this.formObj = new FormValidator("#form-element", this.options); 

  }, 

  methods: { 

    handleClick: function (args) { 

      this.formObj.validate(); 

    }, 

  }, 

}; 

Sample: https://codesandbox.io/s/form-validation-forked-8te80?file=/src/App.vue 

Regards, 

Ponmani M 

[Sandra Bordier]

Thank you very much, it works perfectly !