Available in the OSS Version
Validator - Overview
This is a basic sample showing the notifier inline messages.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
In addition to tight integration options with the Ignite UI for jQuery widgets, the igValidator can display notification messages via either the igNotifier control or an element pointed to via the messageTarget property. The igValidator is versatile; you can set one igValidator for multiple inputs. The user can also take advantage of custom validation rules by using a custom validator, as demonstrated in this example.
Code View
Copy to Clipboard
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
}
]
});
<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"></input>
</div>
<div class="even">
<label>Last name*</label>
<input class="group" type="text" id="lastName"></input>
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>Email*</label>
<input class="group" type="text" id="email"></input>
</div>
<div class="even">
<label>Mobile phone</label>
<input class="group" type="text" id="phone"></input>
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>Create password*</label>
<input class="group" type="password" id="createPassword"></input>
</div>
<div class="even">
<label>Confirm password*</label>
<input class="group" type="password" id="confirmPassword"></input>
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>Date of birth*</label>
<input class="group" id="dateOfBirth"></input>
</div>
<div class="even">
<label>Gender*</label>
<input id='gender'></input>
</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"></input>
</form>
.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;
}
}
<!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>