| Name | Type | Default |
|---|---|---|
| arrow | boolean | true |
|
Sets or gets whether the arrow of the hints will be shown. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} arrow={false}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| animation | ValidatorAnimation | 'fade' |
|
ValidatorAnimation: "fade" | "none"
Sets or gets the animation of showing, hiding the hints. Possible Values:/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} animation={'none'}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| animationDuration | number | 150 |
|
Sets or gets the duration of the animation used for showing/hiding the hints. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} animationDuration={3000}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| closeOnClick | boolean | true |
|
Sets or gets whether the hints will be closed when the user click on them. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} closeOnClick={false}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| focus | boolean | true |
|
Sets or gets whether the jqxValidator will focus the first invalid input. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} focus={false}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| hintType | ValidatorHintType | "tooltip" |
|
ValidatorHintType: "tooltip" | "label"
Sets or gets the hint type. Possible values: 'tooltip' and 'label'. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} hintType={'label'}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| onError | () => void | null |
|
Sets or gets callback which will be called on validation error. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
onError: (): any => {
alert('You have not filled the form correctly!');
},
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} onError={this.state.onError}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| onSuccess | () => void | null |
|
Sets or gets the callback which will be executed on success. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
onSuccess: (): any => {
alert('You have filled the form correctly!');
},
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} onSuccess={this.state.onSuccess}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| position | string | 'right' |
|
Sets or gets the default position of the hints. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} position={'left'}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| rules | Array<ValidatorRule> | [] |
|
Interface ValidatorRule {
input?: string; message?: string; action?: string; rule?: string | any; position?: string; hintRender?: any; } Sets jqxValidator rules. Format of a single rule is as follows:
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| rtl | boolean | false |
|
Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules} rtl={true}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| validationError | Event | |
|
This is triggered when the form is validated with some errors. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator} onValidationError={this.onValidationError}
rules={this.state.rules}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
private onValidationError(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| validationSuccess | Event | |
|
This is triggered when the form is validated whithout any errors. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public render() {
return (
<JqxValidator ref={this.myValidator} onValidationSuccess={this.onValidationSuccess}
rules={this.state.rules}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
private onValidationSuccess(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| hideHint | id | |
|
Hide all hints for a specific input. |
||
| hide | None | |
|
Hiding all hints for the current form. |
||
| updatePosition | None | |
|
Updating the positions of all hints. This is useful for example on window resize. |
||
| validate | htmlElement | |
|
Validating the whole form. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public componentDidMount(): void {
this.myValidator.current!.validate();
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| validateInput | id | |
|
Validates a single input. This method accepts a single parameter which is selector of the input you want to validate. Notice that this selector should be the same like the one you've passed in the rules array. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxValidator, { IValidatorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
class App extends React.PureComponent<{}, IValidatorProps> {
private myValidator = React.createRef<JqxValidator>();
constructor(props: {}) {
super(props);
this.state = {
rules: [{ input: '#userInput', message: 'Username is required!', action: 'blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'blur', rule: 'email' },
{ input: '#emailInput', message: 'Email is required!', action: 'blur', rule: 'required' }]
}
}
public componentDidMount(): void {
this.myValidator.current!.validateInput('#userInput');
}
public render() {
return (
<JqxValidator ref={this.myValidator}
rules={this.state.rules}>
<form id='testForm' action='./'>
<table class='register-table'>
<tr>
<td>Username:</td>
<td>
<input type='text' id='userInput' class='text-input' />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type='text' id='emailInput' class='text-input' />
</td>
</tr>
</table>
</form>
<jqxButton @click='submit()' :width='50'>Submit</jqxButton>
</JqxValidator>
);
}
private submit() {
this.myValidator.current!.validate();
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||