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.

index.ts
index.html
index.css
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/28.1.33/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;
}