Error messages in React Form validator component
30 Jan 202313 minutes to read
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. |
Customizing Error Messages
The default error message for a rule can be customizable by defining it along with concern rule object as follows.
import { FormValidator } from '@syncfusion/ej2-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class Validation extends React.Component {
dialogInstance;
formObject;
animationSettings = { effect: 'Zoom' };
// Dialog will be closed, while clicking on overlay
onOverlayClick() {
this.dialogInstance.hide();
}
componentDidMount() {
const options = {
// validation rules
rules: {
'email': {
required: [true, '* Enter your email']
},
'password': {
required: [true, '* Enter your password']
},
}
};
// Initialize the form validator
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>
<div className="form-group">
<div className="e-float-input">
<input type="password" id="number" name="password" data-msg-containerid="noError"/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top" htmlFor="password">Password</label>
</div>
<div id="noError"/>
</div>
</form>
<br />
<br />
<div className="submitBtn">
<button className="submit-btn e-btn" onClick={this.onSubmitClick = this.onSubmitClick.bind(this)} id="submit-btn">Submit</button>
</div>
<div id="confirmationDialog"/> </div>
</div>
</div>
<DialogComponent id="defaultdialog" isModal={true} visible={false} content='Your details has been updated successfully, Thank you' animationSettings={this.animationSettings} width={'50%'} ref={dialog => this.dialogInstance = dialog} target={'.control-section'} overlayClick={this.onOverlayClick = this.onOverlayClick.bind(this)}/>
</div>);
}
}
ReactDOM.render(<Validation />, document.getElementById('form-element'));
import { 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';
export default class Validation extends React.Component<{}, {}> {
public dialogInstance: DialogComponent;
public formObject: FormValidator;
private animationSettings: object = { effect: 'Zoom' };
// Dialog will be closed, while clicking on overlay
public onOverlayClick() {
this.dialogInstance.hide();
}
public componentDidMount(): void {
const options: FormValidatorModel = {
// validation rules
rules: {
'email': {
required: [true, '* Enter your email']
},
'password': {
required: [true, '* Enter your password']
},
}
};
// Initialize the form validator
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>
<div className="form-group" >
<div className="e-float-input">
<input type="password" id="number" name="password" data-msg-containerid="noError" />
<span className="e-float-line"/>
<label className="e-float-text e-label-top" htmlFor="password" >Password</label>
</div>
<div id="noError"/>
</div>
</form>
<br/>
<br/>
<div className="submitBtn">
<button className="submit-btn e-btn" onClick={this.onSubmitClick = this.onSubmitClick.bind(this)} id="submit-btn">Submit</button>
</div>
<div id="confirmationDialog"/> </div>
</div>
</div>
<DialogComponent id="defaultdialog" isModal={true} visible ={false} content = 'Your details has been updated successfully, Thank you' animationSettings={this.animationSettings} width={'50%'} ref={dialog => this.dialogInstance = dialog!}
target={'.control-section'} overlayClick={this.onOverlayClick=this.onOverlayClick.bind(this)} />
</div>) }
}
ReactDOM.render(<Validation />, document.getElementById('form-element'));