Contents
- Validation Begin
- Validation Complete
Having trouble getting help?
Contact Support
Contact Support
Validation events in React Form validator component
30 Jan 202316 minutes to read
Validation events have two types of events. These are
- validationBegin
- validationComplete
Validation Begin
validationBegin
event triggers before the validation starts and also it invoke for each rules in validation process. Please find the below code snippet.
validationBegin: function(args) {
// ("Validation begin");
},
The following values are passed in args
. You can use this values in event validation.
Fields | Description |
---|---|
element |
Specifies the input element |
name |
Specifies the event name (validationBegin) |
param |
Specifies the param value (true/false) |
value |
Specifies the input value |
Validation Complete
validationComplete
event triggered after validation is completed and also it invoke for each rules in validation process. Please find the below code snippet.
validationComplete: function(args) {
// ("Validation complete");
}
The following values are passed in args
. You can use this values in event validation.
Fields | Description |
---|---|
element |
Specifies the input element |
name |
Specifies the event name (validationComplete) |
param |
Specifies the param value (true/false) |
value |
Specifies the input value |
status |
Specifies the status (success/failure) |
inputName |
Specifies the type of input |
Please find the simple sample for validation events.
import { enableRipple } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component {
componentDidMount() {
// add the rules for validation
const options = {
// validation begin event
validationBegin: (args) => {
const span = document.createElement("span");
span.innerHTML = "Validation begin <hr>";
const log = document.getElementById("EventLog");
log.insertBefore(span, log.firstChild);
},
// validation complete event
validationComplete: (args) => {
if (args.status === "success") {
const span = document.createElement("span");
span.innerHTML = "Validation complete success <hr>";
const log = document.getElementById("EventLog");
log.insertBefore(span, log.firstChild);
}
else {
const span = document.createElement("span");
span.innerHTML = "Validation complete failure <hr>";
const log = document.getElementById("EventLog");
log.insertBefore(span, log.firstChild);
}
},
};
// initialize the form validator
const formObject = new FormValidator('#form1', options);
formObject.addRules('timepicker', { required: true });
document.getElementById('clear').addEventListener('click', () => {
document.getElementById("EventLog").innerHTML = "";
});
}
render() {
return (<div>
<div id='sample'>
<form id='form1' method="post">
<div className='content-wrapper'>
<TimePickerComponent id="timepicker" placeholder="Select a Time"/>
</div>
<label className='e-error' id='timepickerError' htmlFor='timepicker'/>
</form>
</div>
<div id="list_event">
<h4><b>Event Trace</b></h4>
<div id="evt">
<div className="eventarea">
{/*Event log element */}
<span className="EventLog" id="EventLog"/>
</div>
<div className="evtbtn">
{/*clear button element */}
<button className='e-btn' id="clear"> Clear </button>
</div>
</div>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('form-element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { FormEventArgs, FormValidator, FormValidatorModel, ValidArgs } from '@syncfusion/ej2-inputs';
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
public componentDidMount(): void {
// add the rules for validation
const options: FormValidatorModel = {
// validation begin event
validationBegin: (args: ValidArgs) => {
const span = document.createElement("span");
span.innerHTML = "Validation begin <hr>";
const log = document.getElementById("EventLog") as HTMLElement;
log.insertBefore(span, log.firstChild);
},
// validation complete event
validationComplete: (args: FormEventArgs) => {
if (args.status === "success") {
const span = document.createElement("span");
span.innerHTML = "Validation complete success <hr>";
const log = document.getElementById("EventLog") as HTMLElement;
log.insertBefore(span, log.firstChild);
} else {
const span = document.createElement("span");
span.innerHTML = "Validation complete failure <hr>";
const log = document.getElementById("EventLog") as HTMLElement;
log.insertBefore(span, log.firstChild);
}
},
};
// initialize the form validator
const formObject: FormValidator = new FormValidator('#form1', options);
formObject.addRules('timepicker', {required: true});
(document.getElementById('clear') as HTMLElement).addEventListener('click', () => {
(document.getElementById("EventLog") as HTMLElement).innerHTML = "";
});
}
public render() {
return(
<div>
<div id='sample'>
<form id='form1' method="post">
<div className='content-wrapper'>
<TimePickerComponent id="timepicker" placeholder="Select a Time"/>
</div>
<label className='e-error' id='timepickerError' htmlFor='timepicker'/>
</form>
</div>
<div id="list_event">
<h4><b>Event Trace</b></h4>
<div id="evt">
<div className="eventarea" >
{/*Event log element */}
<span className="EventLog" id="EventLog"/>
</div>
<div className="evtbtn">
{/*clear button element */}
<button className='e-btn' id="clear"> Clear </button>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('form-element'));