Localization in React Form validator component

30 Jan 202315 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.jsx

import { L10n } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
L10n.load({
    'ar-AR': {
        'formValidator': {
            "creditcard": "يرجى إدخال رقم بطاقة صالح",
            "date": "ارجوك ادخل تاريخ صحيح.",
            "dateIso": "الرجاء إدخال تاريخ صالح (ISO)",
            "digits": "الرجاء إدخال الأرقام فقط",
            "email": "أدخل بريد إلكتروني صالح",
            "equalTo": "يرجى إدخال نص مطابقة صحيح",
            "max": "الرجاء إدخال قيمة أقل من أو تساوي {0}",
            "maxLength": "الرجاء إدخال ما لا يزيد عن {0} حرف",
            "min": "الرجاء إدخال قيمة أكبر من أو تساوي {0}",
            "minLength": "الرجاء إدخال أحرف {0} على الأقل",
            "number": "من فضلك أدخل رقما صالحا",
            "pattern": "الرجاء إدخال قيمة نمط صحيح",
            "range": "يرجى إدخال قيمة بين {0} و {1}",
            "rangeLength": "يرجى إدخال قيمة بين {0} و {1} من الأحرف",
            "regex": "يرجى إدخال قيمة صحيحة",
            "required": "هذه الخانة مطلوبه",
            "tel": "يرجى إدخال رقم هاتف صالح",
            "url": "أدخل رابط صحيح من فضلك"
        }
    }
});
export default class Validation extends React.Component {
    dialogInstance;
    formObject;
    // Dialog will be closed, while clicking on overlay
    onOverlayClick() {
        this.dialogInstance.hide();
    }
    componentDidMount() {
        const options = {
            locale: "ar-AR",
            rules: {
                email: { email: true },
            }
        };
        this.formObject = new FormValidator('#form1', options);
    }
    onSubmitClick() {
        if (this.formObject.validate()) {
            this.formObject.element.reset();
            this.dialogInstance.show();
        }
    }
    render() {
        return (<div className='control-pane'>
                  <div className='control-section col-lg-12'>
                    <div className='validation_wrapper'>
                      <div className="control_wrapper" id="control_wrapper">
                        <form id="form1" method="post">
                          <div className="form-group">
                            <div className="e-float-input">
                              <input type="email" id="Email" name="email" data-msg-containerid="mailError"/>
                              <span className="e-float-line"/>
                              <label className="e-float-text e-label-top" htmlFor="email">Email</label>
                            </div>
                            <div id="mailError"/>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>);
    }
}
ReactDOM.render(<Validation />, document.getElementById('form-element'));

index.tsx

import { L10n, select } from '@syncfusion/ej2-base';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

L10n.load({
     'ar-AR': {
        'formValidator':{
            "creditcard": "يرجى إدخال رقم بطاقة صالح",
            "date": "ارجوك ادخل تاريخ صحيح.",
            "dateIso": "الرجاء إدخال تاريخ صالح (ISO)",
            "digits" : "الرجاء إدخال الأرقام فقط",
            "email": "أدخل بريد إلكتروني صالح",
            "equalTo" : "يرجى إدخال نص مطابقة صحيح",
            "max" : "الرجاء إدخال قيمة أقل من أو تساوي {0}",
            "maxLength" : "الرجاء إدخال ما لا يزيد عن {0} حرف",
            "min" : "الرجاء إدخال قيمة أكبر من أو تساوي {0}",
            "minLength": "الرجاء إدخال أحرف {0} على الأقل",
            "number" : "من فضلك أدخل رقما صالحا",
            "pattern" : "الرجاء إدخال قيمة نمط صحيح",
            "range" : "يرجى إدخال قيمة بين {0} و {1}",
            "rangeLength" : "يرجى إدخال قيمة بين {0} و {1} من الأحرف",
            "regex": "يرجى إدخال قيمة صحيحة",
            "required" : "هذه الخانة مطلوبه",
            "tel" : "يرجى إدخال رقم هاتف صالح",
            "url": "أدخل رابط صحيح من فضلك"
        }
    }
});


export default class Validation extends React.Component<{}, {}> {
public dialogInstance: DialogComponent;
public formObject: FormValidator;

  // Dialog will be closed, while clicking on overlay
  public onOverlayClick() {
        this.dialogInstance.hide();
  }
  public componentDidMount(): void {
        const options: FormValidatorModel = {
          locale:"ar-AR",
          rules: {
          email: { email: true },
        }
      };
  this.formObject = new FormValidator('#form1', options);
  }

  public onSubmitClick(): void {
  if(this.formObject.validate()) {
    this.formObject.element.reset();
    this.dialogInstance.show();
      }
  }

public render(): JSX.Element {
    return (    <div className = 'control-pane'>
                  <div className='control-section col-lg-12'>
                    <div className='validation_wrapper'>
                      <div className="control_wrapper" id="control_wrapper">
                        <form id="form1"  method="post">
                          <div className="form-group">
                            <div className="e-float-input">
                              <input type="email" id="Email" name="email" data-msg-containerid="mailError"/>
                              <span className="e-float-line"/>
                              <label className="e-float-text e-label-top" htmlFor="email" >Email</label>
                            </div>
                            <div id="mailError"/>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>) }
}
ReactDOM.render(<Validation />, document.getElementById('form-element'));