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

Sets or gets the animation of showing, hiding the hints.

'fade'

'none'

/* 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);

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

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

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

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

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

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

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

Sets jqxValidator rules. Format of a single rule is as follows:

{ input: 'selector-of-the-input', 
    message: 'Custom message on error', 
    action: 'Custom action (keyup, change...etc)', 
    rule: 'Build rule (ssn, phone, email...) or custom function', 
    position: 'Position of the hint (format pos:x,y)', 
    hintRender: 'Function for hint rendering' }
                                

/* 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);

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

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

Code examples

Bind to the validationError event of jqxValidator.

/* 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);

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

Code examples

Bind to the validationSuccess event of jqxValidator.

/* 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);

Hide all hints for a specific input.

Hiding all hints for the current form.

Updating the positions of all hints. This is useful for example on window resize.

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

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