Available in the OSS Version

Validator - Basic Use

This is a basic sample showing the validator widget.

First name*

Last name*

Email*

Mobile phone

Create password*

Confirm password*

Date of birth*

Gender*

Your interests (Select at least 2)*

How do you rate our articles

I accept the Terms and Conditions *

Subscribe for our daily mail digest

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Show In JsFiddle

Copy to Clipboard

                    <!DOCTYPE html>
<html>
<head>
    <title></title>    
	<!--Ignite UI for jQuery Required Combined CSS Files-->
	<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        .group-fields {
            margin-bottom:20px;
        }
        .group-fields .odd {
            float:left;
            width:262px;
        }
        .group-fields .even{
            float:left;
            margin-left:20px;
        }
        .group-fields label {
            display: block;
            line-height: 20px;
            font-family: 'Open Sans',Arial,sans-serif;
            font-size: 13px;
        }
        .group-fields .ui-igedit-container {
            box-sizing: content-box;
        }
        .group-fields input.group {
            width:258px;
            height:32px;
        }
        .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
            width:260px;
            height:34px;
        }
        .group-fields .ui-igpopover {
            width:260px;
        }
        .group-fields input.group {
            border-style: solid;
            border-width: 1px;
            border-color:#bcbcbc;
        }
        .group-fields input.group:hover {
            border-color:#444;
        }
        .group-fields .ui-widget.ui-ignotify.ui-ignotify-inline {
            margin-bottom:0;
        }
        .group-fields input.group.ui-ignotify-error {
            border-color:#f33;
        }
        #igCheckboxAccept, #igCheckboxSubscribe {
            float:left;
            margin-right: 5px;
        }
        .group-fields .inline {
            display:inline;
        }
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        @media screen and (max-width:610px) {
            .group-fields .odd {
                float:left;
                width:202px;
            }
            .group-fields input.group {
                width:200px;
            }
            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
                width:202px;
            }
            .group-fields .ui-igpopover {
                width:202px;
            }
        }
        @media screen and (max-width:478px) {
            .group-fields {
                margin-bottom:0;
            }
            .group-fields .odd, .group-fields .even {
                margin-bottom: 5px;
            }
            .group-fields .odd {
                float:none;
                width:262px;
            }
            .group-fields .even {
                margin-left:0;
            }
            .group-fields input.group {
                width:258px;
                height:32px;
            }
            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
                width:260px;
                height:34px;
            }
            .group-fields .ui-igpopover {
             width:260px;
             }
        }
    </style>
	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!--Ignite UI for jQuery Required Combined JavaScript Files-->
	<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <form id="validationForm" action="" method="post">
        <div class="group-fields clearfix">
            <div class="odd">
                <label>First name*</label>
                <input class="group" type="text" id="firstName" />
            </div>
            <div class="even">
                <label>Last name*</label>
                <input class="group" type="text" id="lastName" />
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <label>Email*</label>
                <input class="group" type="text" id="email" />
            </div>
            <div class="even">
                <label>Mobile phone</label>
                <input class="group" type="text" id="phone" />
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <label>Create password*</label>
                <input class="group" type="password" id="createPassword" />
            </div>
            <div class="even">
                <label>Confirm password*</label>
                <input class="group" type="password" id="confirmPassword" />
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <label>Date of birth*</label>
                <input class="group" id="dateOfBirth" />
            </div>
            <div class="even">
                <label>Gender*</label>
                <input id='gender' />
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <label>Your interests (Select at least 2)*</label>
                <div id='igComboInterests'></div>
            </div>
            <div class="even">
                <label>How do you rate our articles</label>
                <div id="rating"></div>
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <label class="inline">I accept the Terms and Conditions *</label>
                <div id="igCheckboxAccept"></div>
            </div>
            <div class="even">
                <label class="inline">Subscribe for our daily mail digest</label>
                <div id="igCheckboxSubscribe"></div>
            </div>
        </div>
        <input type="submit" value="Sign Up" />
    </form>

	<script>
        $(function () {
            var data = [
                { ID: "ID101", Name: "Business", Code: 101 },
                { ID: "ID102", Name: "Cooking", Code: 102 },
                { ID: "ID103", Name: "Fashion", Code: 103 },
                { ID: "ID104", Name: "Lifestyle", Code: 104 },
                { ID: "ID105", Name: "Photography", Code: 105 },
                { ID: "ID106", Name: "Sports", Code: 106 }];

            $('#gender').igTextEditor({
                inputName: "gender",
                listItems: ["Male", "Female"],
                isLimitedToListValues: true
            });

            $("#phone").igMaskEditor({
                inputMask: "(\\0\\01) 000-0000"
            });

            $('#igComboInterests').igCombo({
                inputName: "products",
                dataSource: data,
                allowCustomValue: true,
                textKey: 'Name',
                valueKey: "ID",
                multiSelection: {
                    enabled: true
                }
            });

            $("#rating").igRating({
                precision: "half",
                valueAsPercent: false
            });

            $("#dateOfBirth").igDatePicker({
                datepickerOptions: { minDate: new Date(1920, 0, 1), maxDate: new Date(2015, 0, 1) }
            });

            $("#igCheckboxAccept").igCheckboxEditor();

            $("#igCheckboxSubscribe").igCheckboxEditor();

            $('#validationForm').igValidator({
                onsubmit: true,
                successMessage: "Valid",
                fields: [{
                    required: true,
                    selector: "#firstName",
                    valueRange: [2],
                    onblur: true,
                    custom: function (value, fieldOptions) {
                        var myRegEx = /^[a-zA-Z]+$/;
                        var isValid = myRegEx.test(value);
                        return isValid;
                    }
                },
                {
                    required: true,
                    selector: "#lastName",
                    valueRange: [2],
                    onblur: true,
                    custom: function (value, fieldOptions) {
                        var myRegEx = /^[a-zA-Z]+$/;
                        var isValid = myRegEx.test(value);
                        return isValid;
                    }
                },
				{
				    required: true,
				    selector: "#dateOfBirth",
				    date: true,
				    onblur: true
				},
                {
                    required: true,
                    selector: "#gender",
                    gender: true,
                    onblur: true
                },
				{
				    required: true,
				    selector: "#email",
				    email: true,
				    onblur: true
				},
                {
                    required: true,
                    selector: "#createPassword",
                    onblur: true,
                    errorMessage: "Should contain at least 8 characters, 1 number, 1 lowercase character (a-z), 1 uppercase character",
                    custom: function(value, fieldOptions){
                        var myRegEx  = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/;
                        var isValid = myRegEx.test(value);
                        return isValid;
                    }
                },
                {
                    required: true,
                    selector: "#confirmPassword",
                    equalTo: "#createPassword",
                    onblur: true,
                },
                {
				    selector: "#rating",
				    successMessage: "Valid",
				    onchange: true,
				    valueRange: {
				        min: 1.5,
				        errorMessage: "At least {0} star required (custom message)"
				    },
				    notificationOptions: {
				        mode: "popover"
				    }
				},
				{
				    required: true,
				    selector: "#igComboInterests",
				    onchange: true,
				    lengthRange: [2]
				},
				{
				    required: true,
				    selector: "#igCheckboxAccept",
				    onchange: true
				},
				{
				    selector: "#igCheckboxSubscribe",
				    onchange: true
				}
                ]
            });
        });
	</script>
</body>
</html>

             <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

	<my-app>Loading...</my-app>

	<!-- 1. Load libraries -->
	<script src="/js/modernizr.min.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery-ui.min.js"></script>
	<!-- IE required polyfills, in this exact order -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
	<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

	<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
	<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
	<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
	<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="/igniteui/js/infragistics.core.js"></script>
	<script src="/igniteui/js/infragistics.lob.js"></script>
	<script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'basic-usage.ts' ).then( null, console.error.bind( console ) );
	</script>
</body>
</html>

             import { Component, NgModule } from '@angular/core';
import { IgMaskEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgCheckboxEditorComponent, IgRatingComponent, IgValidatorComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;

@Component({
    selector: 'my-app',
    template: `
	<form id="validationForm" action="" method="post">
		<input type="text" id="firstName" />
		<input type="text" id="lastName" />
		<input type="text" id="email" />
		<ig-mask-editor widgetId="phone" [options]="{inputMask: '(\\0\\01) 000-0000'}"></ig-mask-editor>
		<input type="password" id="createPassword" />
		<input type="password" id="confirmPassword" />
		<ig-date-picker widgetId="dateOfBirth" [options]="editors.pickerOptions"></ig-date-picker>
		<ig-text-editor widgetId='gender' [options]="{inputName: 'gender', listItems: ['Male', 'Female']}"></ig-text-editor>
		<ig-rating widgetId="rating" [options]="{precision: 'half', valueAsPercent: false}"></ig-rating>
		<ig-checkbox-editor widgetId="igCheckboxAccept"></ig-checkbox-editor>
		<ig-checkbox-editor widgetId="igCheckboxSubscribe"></ig-checkbox-editor>
		<input type="submit" value="Sign Up" />
	</form>
	<ig-validator widgetId="validationForm" [options]="editors.validatorOptions"></ig-validator>`

export class AppComponent {
	public editors: any;

	constructor() {
		this.editors = {
			pickerOptions: {datepickerOptions: { minDate: new Date(1920, 0, 1), maxDate: new Date(2015, 0, 1) }},
			validatorOptions: {onsubmit: true, successMessage: 'Valid', fields: [{required: true, selector: '#firstName', valueRange: [2], onblur: true, custom: function (value, fieldOptions) { var myRegEx = /^[a-zA-Z]+$/; var isValid = myRegEx.test(value); return isValid; }}, {required: true, selector: '#lastName', valueRange: [2], onblur: true, custom: function (value, fieldOptions) { var myRegEx = /^[a-zA-Z]+$/; var isValid = myRegEx.test(value); return isValid; }}, { required: true, selector: '#dateOfBirth', date: true, onblur: true }, { required: true, selector: '#gender', gender: true, onblur: true }, { required: true, selector: '#email', email: true, onblur: true }, { required: true, selector: '#createPassword', onblur: true, errorMessage: "Should contain at least 8 characters, 1 number, 1 lowercase character (a-z), 1 uppercase character", custom: function(value, fieldOptions){ var myRegEx  = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/; var isValid = myRegEx.test(value); return isValid; } }, { selector: "#rating", successMessage: "Valid", onchange: true, valueRange: { min: 1.5, errorMessage: "At least {0} star required (custom message)"}, notificationOptions: { mode: "popover" }}, { required: true, selector:'#confirmPassword', equalTo: '#createPassword', onblur: true }, { required: true, selector: '#igCheckboxAccept', onchange: true }, { selector: '#igCheckboxSubscribe', onchange:true }]}
		};
	}
}

@NgModule({
	imports:	  [ BrowserModule ],
	declarations: [ AppComponent, IgMaskEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgCheckboxEditorComponent, IgRatingComponent, IgValidatorComponent ],
	bootstrap:	[ AppComponent ]
})

export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

             <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
	<!-- 1. Load libraries -->
	<script src="/js/modernizr.min.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery-ui.min.js"></script>
	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="/igniteui/js/infragistics.core.js"></script>
	<script src="/igniteui/js/infragistics.lob.js"></script>
	<!-- ReactJS library -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
	<!-- Ignite UI for jQuery ReactJS Files -->
	<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
	<style type="text/css">
		.group-fields {
            margin-bottom:20px;
        }
        .group-fields .odd {
            float:left;
            width:262px;
        }
        .group-fields .even{
            float:left;
            margin-left:20px;
        }
        .group-fields label {
            display: block;
            line-height: 20px;
            font-family: 'Open Sans',Arial,sans-serif;
            font-size: 13px;
        }
        .group-fields .ui-igedit-container {
            box-sizing: content-box;
        }
        .group-fields input.group {
            width:258px;
            height:32px;
        }
        .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
            width:260px;
            height:34px;
        }
        .group-fields .ui-igpopover {
            width:260px;
        }
        .group-fields input.group {
            border-style: solid;
            border-width: 1px;
            border-color:#bcbcbc;
        }
        .group-fields input.group:hover {
            border-color:#444;
        }
        .group-fields .ui-widget.ui-ignotify.ui-ignotify-inline {
            margin-bottom:0;
        }
        .group-fields input.group.ui-ignotify-error {
            border-color:#f33;
        }
        #igCheckboxAccept, #igCheckboxSubscribe {
            float:left;
            margin-right: 5px;
        }
        .group-fields .inline {
            display:inline;
        }
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        @media screen and (max-width:610px) {
            .group-fields .odd {
                float:left;
                width:202px;
            }
            .group-fields input.group {
                width:200px;
            }
            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
                width:202px;
            }
            .group-fields .ui-igpopover {
                width:202px;
            }
        }
        @media screen and (max-width:478px) {
            .group-fields {
                margin-bottom:0;
            }
            .group-fields .odd, .group-fields .even {
                margin-bottom: 5px;
            }
            .group-fields .odd {
                float:none;
                width:262px;
            }
            .group-fields .even {
                margin-left:0;
            }
            .group-fields input.group {
                width:258px;
                height:32px;
            }
            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
                width:260px;
                height:34px;
            }
            .group-fields .ui-igpopover {
             width:260px;
             }
        }
	</style>

	<div id="app"></div>
	<script type="text/babel">
		var EditForm = React.createClass({
		render:function(){
		return(
		<div className="container">
			<form id='validationForm' action="" method="post">
				<div class="group-fields clearfix">
					<div class="odd">
						<label>First name*</label>
						<input class="group" type="text" id="firstName" />
					</div>
					<div class="even">
						<label>Last name*</label>
						<input class="group" type="text" id="lastName" />
					</div>
				</div>
				<div class="group-fields clearfix">
					<div class="odd">
						<label>Email*</label>
						<input class="group" type="text" id="email" />
					</div>
					<div class="even">
						<label>Mobile phone</label>
						<IgMaskEditor id='phone'
									  inputMask='(001) 000-0000' />
					</div>
				</div>
				<div class="group-fields clearfix">
					<div class="odd">
						<label>Create password*</label>
						<input class="group" type="password" id="createPassword" />
					</div>
					<div class="even">
						<label>Confirm password*</label>
						<input class="group" type="password" id="confirmPassword" />
					</div>
				</div>
				<div class="group-fields clearfix">
					<div class="odd">
						<label>Date of birth*</label>
						<IgDatePicker id='dateOfBirth'
									  datepickerOptions={{ minDate: new Date(1920, 0, 1), maxDate: new Date(2015, 0, 1)}} />
					</div>
					<div class="even">
						<label>Gender*</label>
						<IgTextEditor id='gender'
									  listItems={[ "Male", "Female" ]} />
					</div>
				</div>
				<div class="group-fields clearfix">
					<div class="even">
						<label>How do you rate our articles</label>
						<IgRating id='rating'
								  precision='half'
								  valueAsPercent={false} />
					</div>
				</div>
				<div class="group-fields clearfix">
					<div class="odd">
						<label class="inline">I accept the Terms and Conditions *</label>
						<IgCheckboxEditor id='igCheckboxAccept' />
					</div>
					<div class="even">
						<label class="inline">Subscribe for our daily mail digest</label>
						<IgCheckboxEditor id='igCheckboxSubscribe' />
					</div>
				</div>
				<input type="submit" value="Sign Up" />
			</form>
			<IgValidator id='validationForm'
						 onsubmit={true}
						 successMessage='Valid'
						 fields={[
						 {
							 required: true,
							 selector: "#firstName",
							 valueRange: [2],
							 onblur: true,
							 custom: function (value, fieldOptions) {
								 var myRegEx=/^[a-zA-Z]+$/;
								 var isValid=myRegEx.test(value);
								 return isValid;
							 }
						 },
						 {
							 required: true,
							 selector: "#lastName",
							 valueRange: [2],
							 onblur: true,
							 custom: function (value, fieldOptions) {
								 var myRegEx=/^[a-zA-Z]+$/;
								 var isValid=myRegEx.test(value);
								 return isValid;
							 }
						 },
						 {
							 required: true,
							 selector: "#dateOfBirth",
							 date: true,
							 onblur: true
						 },
						 {
							 required: true,
							 selector: "#gender",
							 gender: true,
							 onblur: true
						 },
						 {
							 required: true,
							 selector: "#email",
							 email: true,
							 onblur: true
						 },
						 {
							 required: true,
							 selector: "#createPassword",
							 onblur: true,
							 errorMessage: "Should contain at least 8 characters, 1 number, 1 lowercase character (a-z), 1 uppercase character",
							 custom: function(value, fieldOptions){
								 var myRegEx=/^(? =.*[0-9])(? =.*[a-z])(? =.*[A-Z])([a-zA-Z0-9]{8,})$/;
								 var isValid=myRegEx.test(value);
								 return isValid;
							}
						 },
						 {
							 required: true,
							 selector: "#confirmPassword",
							 equalTo: "#createPassword",
							 onblur: true
						 },
						 {
							 selector: "#rating",
							 successMessage: "Valid",
							 onchange: true,
							 valueRange: {
							 min: 1.5,
							 errorMessage: "At least {0} star required (custom message)"
						 },
							 notificationOptions: {
								mode: "popover"
							 }
						 },
						 {
							 required: true,
							 selector: "#igCheckboxAccept",
							 onchange: true
						 },
						 {
							 selector: "#igCheckboxSubscribe",
							 onchange: true
						 }
						 ]} />
		</div>
		)}
		})

		var App = React.createClass({
			render: function () {
				return (
					<div>
						<EditForm />
					</div>
				);
			},
		});
		ReactDOM.render(
			<App />,
			document.getElementById("app")
		);
	</script>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Validator - Basic Use

Code View