React UI Components Documentation

ReactJS Validator Component

The Validator component for React represents a jQWidgets plugin used for validating html forms using JavaScript.

Prerequisites

Refer to React Getting Started before you start with this help topic.

Configuration

The Validator component for React requires the following imports.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';

Then we create our component class. Properties and methods are put as React props.

 
class App extends React.Component {
  render () {
    return (
        <JqxValidator ref='myValidator' rules={rules}>
            <form id='form' action="./">
                <table className="register-table">
                <tbody>
                    <tr>
                        <td>Username:</td>
                        <td><JqxInput className="userInput text-input"/></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><JqxPasswordInput ref='passwordInput' className="passwordInput text-input"/></td>
                    </tr>
                </tbody>
                </table>
            </form>
        </JqxValidator>
    )
  }
}

Finally we render our class in the desired HTML element:

 
ReactDOM.render(<App />, document.getElementById('app'));

Events Methods & Properties

In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the React "ref" Callback Attribute:

 
<JqxValidator ref='myValidator' rules={rules}>
    <form id='form' action="./">
        <table className="register-table">
          
        </table>
    </form>
</JqxValidator>

Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() React Component Lifecycle method.

 
class App extends React.Component {
  componentDidMount()
  {
     //your logic
  }
  render ()
  {
    return
    (
      ....
    )
  }
};

Events

The validationSuccess event is triggered when the user selects an item.

The following example demonstrates how to add an event listener:

 
componentDidMount ()
{
 
  this.refs.myValidator.on('validationSuccess', (event) =>
  {
     //your logic
  });
 
}

Methods & Properties

This is how you call methods & props:

 
//Hide Hint Method
this.refs.myValidator.hideHint("#passwordInput");
 
//Validate Method
this.refs.myValidator.hideHint("#passwordInput");
 
//Get Properties
let height = this.refs.myValidator.hintType();
 
//Set Properties
this.refs.myValidator.hintType("label");

Every component have a method setOptions which accepts a object as an argument. This object contains component settings.

 
this.refs.myValidator.setOptions({
    hintType: 'label', focus: false, closeOnClick: false
})

Every component also have a method getOptions which returns a object containing the component settings.