Localization of error messages in Vue Form Validator

[Adrian Wojtyczka]

How can I implement the localization of error messages in Vue Form Validator?
Is it possible to use the L10n.load method to translate messages?

[Berly Christopher]

Hi Adrian, 

Greetings from Syncfusion support. 

We can localize the error message in the EJ2 Form Validator with help of L10n class as mentioned in the below documentation. 

UG Link: https://ej2.syncfusion.com/vue/documentation/form-validator/error-messages/  

 

<template> 

  <div> 

    <form id="form-element" class="form-horizontal"> 

      <div class="form-group"> 

        <label class="col-sm-3 control-label" for="user">Name</label> 

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

          <ejs-textbox id="email" placeholder="Enter your name" name="email"></ejs-textbox> 

        </div> 

      </div> 

    </form> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { 

  TextBoxPlugin, 

  FormValidator, 

  FormValidatorModel 

} from "@syncfusion/ej2-vue-inputs"; 

import { L10n } from "@syncfusion/ej2-base"; 

Vue.use(TextBoxPlugin); 

L10n.load({ 

  "ar-AR": { 

    formValidator: { 

      required: "هذه الخانة مطلوبه", 

      email: "أدخل بريد إلكتروني صالح", 

      url: "أدخل رابط صحيح من فضلك", 

      date: "ارجوك ادخل تاريخ صحيح.", 

      dateIso: "الرجاء إدخال تاريخ صالح (ISO)", 

      creditcard: "يرجى إدخال رقم بطاقة صالح", 

      number: "من فضلك أدخل رقما صالحا", 

      digits: "الرجاء إدخال الأرقام فقط", 

      maxLength: "الرجاء إدخال ما لا يزيد عن {0} حرف", 

      minLength: "الرجاء إدخال أحرف {0} على الأقل", 

      rangeLength: "يرجى إدخال قيمة بين {0} و {1} من الأحرف", 

      range: "يرجى إدخال قيمة بين {0} و {1}", 

      max: "الرجاء إدخال قيمة أقل من أو تساوي {0}", 

      min: "الرجاء إدخال قيمة أكبر من أو تساوي {0}", 

      regex: "يرجى إدخال قيمة صحيحة", 

      tel: "يرجى إدخال رقم هاتف صالح", 

      pattern: "الرجاء إدخال قيمة نمط صحيح", 

      equalTo: "يرجى إدخال نص مطابقة صحيح" 

    } 

  } 

}); 

export default { 

  mounted() { 

    var options = { 

      rules: { 

        email: { required: true } 

      }, 

      locale: "ar-AR", 

      customPlacement: function(element, errorElement) { 

        element.parentNode.parentNode.appendChild(errorElement); 

      } 

    }; 

    var formObject = new FormValidator("#form-element", options); 

  }, 

  data() { 

    return {}; 

  } 

}; 

</script> 

 

 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FormValidator_localization1221158575  

 

  

Regards, 

Berly B.C 

[Lana]

Hi, for me the same locale object key (formValidator) doesn't work for text type in-place editor.

So I translate validation messages via message customisation which is not convenient. Is it a bug or feature?

[Indrajith Srinivasan]

Hi Lana, 

 

Good day to you, 

 

We have validated your reported query. In In-place editor the components will be initialized dynamically,  hence you can use the in-place editor built-in validations by configuring the validationRules and name properties. You can modify the error messages in the validating event of the in-place editor. The in-place editor supports only the built-in validations. Check the below shared documentation and sample for reference. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/inplace-editor/validation/ 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/In-place_editor_validations2106939816 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith