Localization in EJ2 TypeScript Form validator control

15 May 20238 minutes to read

The Localization library allows users to localize the default error message contents of the formValidator to different cultures using the locale property.

The FormValidator provides default error messages for all default validation rules. It is tabulated as follows:

Rules message
required This field is required.
email Please enter a valid email address.
url Please enter a valid URL.
date Please enter a valid date.
dateIso Please enter a valid date ( ISO ).
number Please enter a valid number.
digit Please enter only digits.
maxLength Please enter no more than {0} characters.
minLength Please enter at least {0} characters.
rangeLength Please enter a value between {0} and {1} characters long.
range Please enter a value between {0} and {1}.
max Please enter a value less than or equal to {0}.
min Please enter a value greater than or equal to {0}.
regex Please enter a correct value.

Loading translations

To load translation object in your application use load function of L10n class.

The following example demonstrates the FormValidator in Arabic culture with error message for email.

import { FormValidator,FormValidatorModel} from '@syncfusion/ej2-inputs';
import { L10n } from '@syncfusion/ej2-base';

// Load `German` culture to override spin buttons tooltip text
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" : "يرجى إدخال نص مطابقة صحيح"
        }
    },

});

let options: FormValidatorModel = {
    rules: {
        email: { email: true },
    },
    locale:"ar-AR"
}
let formObject: FormValidator = new FormValidator('#form-element', options);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Form Validator</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <form id="form-element" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="user">Email</label>
                <div class="col-sm-6">
                    <input type="text" id="email" name="email" class="form-control" />
                </div>
            </div>
           
        </form>
    </div>
</body>

</html>
#container {
    visibility: hidden;
    padding: 10px;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#error {
    width: 100%;
    height: 70px;
    border: 1px solid red;
    padding: 10px;
}