Sets or gets the arrow property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [arrow]="false">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

enum ValidatorAnimation {
     fade,
     none
}

Sets or gets the animation property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [animation]="'none'">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the animationDuration property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [animationDuration]="3000">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the closeOnClick property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [closeOnClick]="false">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the focus property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [focus]="false">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

enum ValidatorHintType {
     tooltip,
     label
}

Sets or gets the hintType property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [hintType]="'label'">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the onError property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [onError]="onError">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the onSuccess property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [onSuccess]="onSuccess">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the position property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [position]="'left'">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

interface ValidatorRule {
     input?: String;
     message?: String;
     action?: String;
     rule?: String | Any;
     position?: String;
     hintRender?: Any;
}

Sets or gets the rules property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

Sets or gets the rtl property.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules" [rtl]="true">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

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

Code examples

Bind to the validationError event of jqxValidator.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator(onValidationError)="ValidationError($event)"
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    ValidationError(event: any): void 
    {
        // Do Something
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

							

						

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

Code examples

Bind to the validationSuccess event of jqxValidator.

import { Component, ViewEncapsulation } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator(onValidationSuccess)="ValidationSuccess($event)"
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    ValidationSuccess(event: any): void 
    {
        // Do Something
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}

							

						

import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    @ViewChild('myValidator') myValidator: jqxValidatorComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myValidator.hideHint(input1);
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}
							

						

import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    @ViewChild('myValidator') myValidator: jqxValidatorComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myValidator.hide();
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}
							

						

import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    @ViewChild('myValidator') myValidator: jqxValidatorComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myValidator.updatePosition();
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}
							

						

import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    @ViewChild('myValidator') myValidator: jqxValidatorComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myValidator.validate();
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}
							

						

import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";

import { jqxValidatorComponent } from '../../../jqwidgets-ts/angular_jqxvalidator';
import { jqxPasswordInputComponent } from '../../../jqwidgets-ts/angular_jqxpasswordinput';
import { jqxDateTimeInputComponent } from '../../../jqwidgets-ts/angular_jqxdatetimeinput';
 
@Component({
    selector: "app-root",
    template: `
        <jqxValidator #myValidator
            [rules]="rules">
            <form id='form' action="./">
                <table class="register-table">
                    <tbody>
                        <tr>
                            <td>Username:</td>
                            <td><jqxInput class="userInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><jqxPasswordInput #passwordInput class="passwordInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Confirm password:</td>
                            <td><jqxPasswordInput #confirmPasswordInput class="passwordConfirmInput text-input" [width]="190" [height]="22"></jqxPasswordInput></td>
                        </tr>
                        <tr>
                            <td>Birth date:</td>
                            <td><jqxDateTimeInput #dateTimeInput [width]="195" [height]="22" [value]="initialDate" class="birthInput"></jqxDateTimeInput></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><jqxInput [placeHolder]="'someone@mail.com'" class="emailInput text-input" [width]="190" [height]="22"></jqxInput></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 20px;">
                                <jqxButton #SendButton (onClick)="sendButton()"
                                    style="text-align: center; margin-left: 8em;"
                                    [width]="60" [height]="25">
                                    Send
                                </jqxButton>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </jqxValidator>,
        styles: [`
            html, body {
              width: 100vw;
              height: 100vh;
              padding: 0;
              margin: 0;
            }

            .text-input {
              height: 21px;
              width: 200px;
            }

            .register-table {
              margin-top: 10px;
              margin-bottom: 10px;
            }

              .register-table td,
              .register-table tr {
                margin: 0px;
                padding: 2px;
                border-spacing: 0px;
                border-collapse: collapse;
                font-family: Verdana;
                font-size: 12px;
              }

            h3 {
              display: inline-block;
              margin: 0px;
              padding: 0px;
            }
        `],
        encapsulation: ViewEncapsulation.None
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myValidator') myValidator: jqxValidatorComponent;
    @ViewChild('dateTimeInput') dateTimeInput: jqxDateTimeInputComponent;
    @ViewChild('passwordInput') passwordInput: jqxPasswordInputComponent;
    @ViewChild('confirmPasswordInput') confirmPasswordInput: jqxPasswordInputComponent;

    @ViewChild('myValidator') myValidator: jqxValidatorComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myValidator.validateInput(input1);
    }

    initialDate: Date = new Date(2014, 4, 1);

    sendButton(): void {
        this.myValidator.validate(document.getElementById('form'));
    }

    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' },    
        {
            input: '.birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged',
            rule: (input: any, commit: any): any => {
                let date = this.dateTimeInput.value();
                let result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
                return result;
            }
        },
        { input: '.passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
        { input: '.passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
        {
            input: '.passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus',
            rule: (input: any, commit: any): boolean => {
                if (this.passwordInput.val() === this.confirmPasswordInput.val()) {
                    return true;
                }
                return false;
            }
        },
        { input: '.emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
        { input: '.emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }
    ];
}