ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する
今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。
サーバーからのエラー結果を表示する
ポストした後、サーバーのチェックが行われエラーの結果がJSONで返ってくるフォームパネルのサンプルです。
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
- ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.BasicFormクラス
http://extdocs.xenophy.com/?class=Ext.form.BasicForm
JSON(今回はこのファイルがフォームの送信先になっています):
{
success:false,
errors:{
'samplefield1':'間違っています。' ,
'samplefield2':'間違っています。' ,
'samplefield4':'間違っています。' ,
'samplefield5':'間違っています。' ,
'samplefield6':'特に設定することも無く、エラーメッセージを表示できます。'
}
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 フォーム エラーの表示</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="../js/ext/src/locale/ext-lang-ja.js"></script>
<script type="text/javascript" src="form-errors.js"></script>
<style TYPE="text/css">
<!--
.tick {background-image: url(../img/icon/tick.png) !important;}
-->
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">
Extのフォームフィールドへのエラーの表示
</p>
<div id="form"></div>
<br/>
Java Script：<a href="form-errors.js">form-errors.js</a><br/>
JSON File：<a href="errors.json">errors.json</a><br/>
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
var form = new Ext.form.FormPanel({
renderTo:'form',
autoScroll:true,
url:'errors.json',//送信先URL 今回はエラーを返す静的なJSONファイルを指定しています。
title:'フォームの簡単な紹介',
height:330,
width:500,
bodyStyle:{
padding:'8px'
},
footerStyle:{ //ボタン周りの表示の調整用スタイル
border:'solid 1px #99BBE8',
'border-top':'none'
},
labelWidth:180,
defaults:{
msgTarget:'under',
anchor:'90%',
xtype:'textfield'
},
items:[
{
name:'samplefield1',
fieldLabel:'テキストフィールド1',
emptyText:'入力してください', //空のときのテキスト
},
{
name:'samplefield2',
fieldLabel:'テキストフィールド2(必須項目)',
emptyText:'入力してください',
},
{
xtype:'displayfield',
name:'samplefield3',
fieldLabel:'ディスプレイフィールド',
value:'表示だけのフィールドです。',
},
new Ext.form.NumberField({
name:'samplefield4',
fieldLabel:'ナンバーフィールド',
allowDecimals:false, //小数点を入力できないようにします
}),
{
name:'samplefield5',
fieldLabel:'Emailフィールド',
emptyText:'入力してください',
vtype:'email', //vtypeコンフィグでバリデーションが設定
},
{
xtype:'datefield',
name:'samplefield6',
fieldLabel:'日付フィールド',
emptyText:'入力してください',
anchor:false,//anchorをキャンセル
width:100
}
],
buttonAlign:'center',
buttons:[
{
text:'送信',
//formBind:true,
iconCls:'tick',
handler:function(){
//ポストする。
form.getForm().submit();
//今回はフィールドに何を入れてもエラーが返ってきますになります。
}
}
]
});
});
実行結果:
サーバーからのエラー結果を表示する
今回のキモになるのはサーバーから返されるJSONの型です。今回はサーバーサイドのプログラムを書かずにどんな値を送信しても静的なJSONファイルが返ってくるようにしています。
{
success:false,
errors:{
'samplefield1':'間違っています。' ,
'samplefield2':'間違っています。' ,
'samplefield4':'間違っています。' ,
'samplefield5':'間違っています。' ,
'samplefield6':'特に設定することも無く、エラーメッセージを表示できます。'
}
}
サーバーサイドで処理する際は、レスポンスとして返却するJSONを上のような形式にします。
successはエラーが合った場合必ずfalseを返すようにします。
errorsにはオブジェクトでエラーのあったフィールド名：エラーメッセージという形式でエラーを列挙します。
このJSONのフォーマットでレスポンスを返すとExtJSのフォームが自動的にエラーを表示してくれます。
ポイントはerrors:{}の形式を必ずこの形にすることです。
{
success:false,//or true
errors:{
'フィールド名':'メッセージ'
・・・・
}//エラーがない場合は空
}
実際にサンプルコードを動かしてみると、どんな値を送ってもerros.jsonのJSONが返り、各フィールドにエラーメッセージが表示されます。
msgTargetをunderにしておくと見やすくなります。
このJSONでsamplefield3:’間違っています’を付け加えた場合、displayfieldにもエラーメッセージを出してしまうので注意してください。
フォームのsubmit後の処理はsubmit()メソッドの引数にオブジェクトで処理を渡すこともできますが、簡単なエラー処理であればJSONの形をきちんとするだけで、submit()の引数になる長い処理を記述しなくてよいので便利です。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
