React UI Components Documentation

Sets or gets the arrow property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} arrow={false}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} animation={'none'}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} animationDuration={3000}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeOnClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} closeOnClick={false}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the focus property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} focus={false}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hintType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} hintType={'label'}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onError property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} onError={onError}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onSuccess property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} onSuccess={onSuccess}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the position property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} position={'left'}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rules property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules} rtl={true}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when the form is validated with some errors.

Code examples

Bind to the validationError event of jqxValidator.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.on('validationError', (event) => {
            // Do Something...
        });
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This is triggered when the form is validated whithout any errors.

Code examples

Bind to the validationSuccess event of jqxValidator.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.on('validationSuccess', (event) => {
            // Do Something...
        });
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.hideHint(input1);
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.hide();
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.updatePosition();
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.validate();
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxValidator from 'jqwidgets-react/react_jqxvalidator.js';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myValidator.validateInput(input1);
    }

    render() {       
        let rules =
        [
            { input: '.userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
            { input: '.userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
        ];
        return (
            <JqxValidator ref='myValidator' rules={rules}>
                <form id='form' action="./">
                    <table>
                        <tbody>
                            <tr>
                                <td>Username:</td>
                                <td>
                                    <jqxInput className='userInput' width={190} height={22}></jqxInput>
                                </td>
                            </tr>  
                        </tbody>
                    </table>
                </form>
            </JqxValidator>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));