OSS で利用できる機能
バリデーター - 基本使用
これは Validator ウィジェットの基本的なサンプルです。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Ignite UI for jQuery Required Combined CSS Files-->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<form id="validationForm" action="" method="post">
<div class="group-fields clearfix">
<div class="odd">
<label>名前*</label>
<input class="group" type="text" id="firstName" />
</div>
<div class="even">
<label>名字*</label>
<input class="group" type="text" id="lastName" />
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>メール*</label>
<input class="group" type="text" id="email" />
</div>
<div class="even">
<label>携帯電話</label>
<input class="group" type="text" id="phone" />
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>パスワードの作成*</label>
<input class="group" type="password" id="createPassword" />
</div>
<div class="even">
<label>パスワードの確認*</label>
<input class="group" type="password" id="confirmPassword" />
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>生年月日*</label>
<input class="group" id="dateOfBirth" />
</div>
<div class="even">
<label>性別*</label>
<input id='gender' />
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label>趣味 (2 以上を選択してください)*</label>
<div id='igComboInterests'></div>
</div>
<div class="even">
<label>記事の評価</label>
<div id="rating"></div>
</div>
</div>
<div class="group-fields clearfix">
<div class="odd">
<label class="inline">契約条件に同意*</label>
<div id="igCheckboxAccept"></div>
</div>
<div class="even">
<label class="inline">デイリー メールに加入</label>
<div id="igCheckboxSubscribe"></div>
</div>
</div>
<input type="submit" value="サインアップ" />
</form>
<script>
$(function () {
var data = [
{ ID: "ID101", Name: "ビジネス", Code: 101 },
{ ID: "ID102", Name: "料理", Code: 102 },
{ ID: "ID103", Name: "ファッション", Code: 103 },
{ ID: "ID104", Name: "ライフスタイル", Code: 104 },
{ ID: "ID105", Name: "フォトグラフィー", Code: 105 },
{ ID: "ID106", Name: "スポーツ", Code: 106 }];
$('#gender').igTextEditor({
inputName: "gender",
listItems: ["男", "女"],
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: "有効",
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: "8 以上の文字、1 数字、1 小文字 (a-z)、1 大文字を含む必要があります",
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: "有効",
onchange: true,
valueRange: {
min: 1.5,
errorMessage: "星 {0} つ以上が必要 (カスタム メッセージ)"
},
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>