Validation Events in React Form Validator component

18 May 2022 / 3 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.

Source

Preview

index.jsx

index.html

index.css

index.tsx

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">
                
                <span className="EventLog" id="EventLog"/>
            </div>
            <div className="evtbtn">
                
                <button className='e-btn' id="clear"> Clear </button>
            </div>
        </div>
    </div>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('form-element'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React TimePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id="form-element">
        
            <div id='loader'>Loading....</div>
    </div>
</body>

</html>

.content-wrapper {
    padding-left: 40px;
    padding-top: 36px;
  }
  
  #EventLog b {
    color: #388e3c;
  }
  #EventLog {
    word-break: normal
  }
  #listview-def {
    border: 1px solid #dcdcdc;
  }
  
  .evtbtn {
    margin-top: 40px;
    margin-left: 70px;
  }
  
  /* csslint ignore:start */
  
  hr { 
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  
  /* csslint ignore:end */
  
  #evt {
    border: 1px solid #dcdcdc;
    padding: 10px;
    min-width: 10px;
  }
  
  #sample {
    display: inline-flex;
  }
  
  .eventarea {
    min-width: 250px;
    height:273px;overflow: auto
  }
  
  #list_event {
    display: inline-block;
    float: right;
  }

  label#timepickerError {
    margin-left: 40px;
  }
  
  #container {
    visibility: hidden;
  }
  
  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

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'));

Contents

Validation Begin
Validation Complete

Contents

Validation Begin
Validation Complete

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!