フォーム関連機能
フォーム関連機能は、WebDBアプリケーションを作成する上で基本となる機能です。Alinous-Coreでは、フォームに対してカスタムのバリデータをデフォルトから付けられたり、戻るボタンの自動生成ができるなど、実際の開発の状況にあわせた仕様になっています。
フォームの種類と名前について
Alinous-Coreでフォームを使うときには、1つだけ命名ルールがあります。それは、フォームの値が配列の場合は名前が[]
で終わるというルールです。フォームの種類を見るために「http://localhost:8080/boxtest/」にアクセスして「ALINOUS_HOME/boxtest/index.html」の内容を表示してみましょう。
フォームは上から、
- コンボボックス
- ラジオボタン
- テキスト
- リスト(複数選択)
- チェックボックス
- テキストエリア
になります。このうち、「リスト(複数選択)」「チェックボックス」が複数選択の対象になり、配列の値をとります。よって、これらを利用する場合にはそのインプットに[]
で終わる名前を付ける必要があります。今回、例として、
- リスト(複数選択):multisel[]
- チェックボックス:checktest[]
という名前がついています。ソースコードは下のようになります。
<select name="multisel[]" alns:validate="custom" multiple="true"> <option value="{$Record}"
alns:iterate="@TEST" alns:variable="Record"> {$Record} </option> </select> <br><br> <input type="checkbox" name="checktest[]" value="A"
alns:validate="custom">A<br> <input type="checkbox" name="checktest[]" value="B">B<br> <input type="checkbox" name="checktest[]" value="C">C<br>
フォームの動的描画について
実際の開発では、フォームを動的に描画する機会もあると思いますが、Alinous-Coreではフォームの動的描画をサポートしています。先ほど示した「ALINOUS_HOME/boxtest/index.htmlの複数選択タグ周辺」のソースを見てください。
このソースでは、alns:iterate
属性が使われています。この属性は、HTMLをレンダリングするまえに実行されるAlinousScriptで作成した配列を使ってHTMLのタグを展開したい場合に使われます。例では、@TEST
という配列がAlinousScriptで作られていて、その配列の個数だけoption
タグが繰り返されます。実際に、配列を作っているAlinousScriptは、「index.alns」というファイルになり、ソースコードは次のようになります。
$TEST[0] = "aaa"; $TEST[1] = "bbb"; $TEST[2] = "ccc"; return 0;
感覚としては、配列をテーブルのtr
タグおよびtd
タグに展開するときと同じです。この部分は『HTMLとSQLで簡単Web-DB開発 次世代Web開発言語「Alinous-Core」』の記事を読むと理解しやすいかと思います。
標準バリデータ
バリデータはとてもよく使われる機能で、Webフレームワークでは必須の機能といえます。Alinous-Coreでは、標準のバリデータとして次のものを用意しています。
名称 | 内容 |
notnull | 空文字をはじくバリデータ。 |
int | 数字フォーマット以外をはじくバリデータ。 |
regex | 正規表現以外をはじくバリデータ。正規表現はalns:regex属性で指定します。 |
標準バリデータを使っている例としては、「ALINOUS_HOME/insert/index.html」が分かりやすいと思います。ここではnotnullバリデータを利用しています。「http://localhost:8080/insert/」にアクセスして、何も入力しないまま[NEXT]ボタンを押すと、次のようにエラーが表示されて次のページに進みません。
このときのフォーム全体のソースは次のようになります。
<form name="searchForm" action="confirm.html" method="POST"
enctype="multipart/form-data"> <table> <tr> <td>NAME : </td> <td> <input type="text" name="name" value=""
alns:validate="notnull"> <span alns:msg="name" alns:form="searchForm"
alns:validate="notnull"> <font color="#FF0000">input your NAME</font><br> </span> </td> </tr> <tr> <td>E-MAIL : </td> <td> <input type="text" name="mail" alns:validate="notnull"> <span alns:msg="mail" alns:form="searchForm"
alns:validate="notnull"> <font color="#FF0000">input your mail</font><br> </span> </td> </tr> <tr> <td>COMMENT : </td> <td> <input type="text" name="comment" alns:validate="notnull"> <span alns:msg="comment" alns:form="searchForm"
alns:validate="notnull"> <font color="#FF0000">input your comment</font><br> </span> </td> </tr> </table> <input name="submit" type="submit" value="NEXT"/> </form>
ここで、最初のテキストインプットに注目してみます。バリデータの設定仕方は、次のようにHTML内で行うことができます。
<input type="text" name="name" value="" alns:validate="notnull"> <span alns:msg="name" alns:form="searchForm" alns:validate="notnull"> <font color="#FF0000">input your NAME</font><br> </span>
まずは、バリデータを設定する部分から説明します。input
タグの中にalns:validate
という属性がありますが、この属性を設定することでバリデータを設定できます。notnullバリデータの場合はこれでバリデータの設定は終わりです。もし、regexバリデータを使う場合は、alns:validate
にregex
という値を設定し、さらにalns:regex
という属性をinput
タグの中に追加して正規表現を設定します。複数のバリデータを設定したい場合には、alns:validate="notnull,int"
のようにカンマ区切りで複数指定できます。
つぎに、バリデーションに失敗したときに表示するメッセージを設定します。このメッセージはspan
タグで設定できます。上のソースのspan
タグにはalns:msg
、 alns:form
、 alns:validate
の3つの属性がありますが、これらを設定することでエラーメッセージを表示させることができます。alns:msg
には、そのメッセージの対象になるinput
タグの名前を指定します。alns:form
には、input
タグが含まれるフォーム名を設定します。そして、alns:validate
には、どのバリデータで失敗したときにこのエラーメッセージを表示するかを設定します。
以上のやり方だけで、標準バリデータを設定することができます。
カスタムバリデータについて
Web系の開発をしていると、NULLチェックや正規表現のフォーマットチェックといった、データのフォーマットだけでバリデーションが完結するもの以外に、データベースの中身にアクセスしないとバリデーションができないようなものがあります。そのようなときもAlinous-Coreは簡単にカスタムのバリデーション処理を実装できます。カスタムバリデータの設定方法は、標準のバリデータの設定とほぼ似ていますが、次の2点が違います。
- alns:validate属性の値にcustomを設定する
- validationのロジックを自分で実装する
では、実際にカスタムバリデータの動きを見てみましょう。カスタムバリデータのサンプルは、「ALINOUS_HOME/boxtest」フォルダにさまざまなフォームを表示しているページがありますので、そこを参考にします。まずは、「ALINOUS_HOME/boxtest/index.html」の内容を見てみます。
<html> <head> <title>Alinous-Core</title> </head> <body> TEST FORM inputS<br> <br> Testing alns:if attribute.<br> <span alns:if="{BOOL($AA != null)}"> $AA is not null. </span> <form name="testForm" action="show.html" method="POST"> <select name="sel" alns:validate="custom"> <option value="{$Record}"
alns:iterate="@TEST" alns:variable="Record"> {$Record} </option> </select> <br> <input type="radio" name="rtest" value="A"
alns:validate="custom">A<br> <input type="radio" name="rtest" value="B">B<br> <input type="radio" name="rtest" value="C">C<br> <br><br> <input type="text" name="txt" value="Hello world"
alns:validate="custom"><br> <br> Multiple select.<br> Please add "[]" at the end of parameter's name. Then the parameter becames Array parameter.<br> If we watch the variables after submiting the form with debugger, the array named 'multisel' is there under the $IN variable. <select name="multisel[]" alns:validate="custom" multiple="true"> <option value="{$Record}"
alns:iterate="@TEST" alns:variable="Record"> {$Record} </option> </select> <br><br> <input type="checkbox" name="checktest[]" value="A"
alns:validate="custom">A<br> <input type="checkbox" name="checktest[]" value="B">B<br> <input type="checkbox" name="checktest[]" value="C">C<br> <br><br> <textarea name="txtArea" size="10" alns:validate="custom"> FirstVALUE </textarea> <br><br> <input name="submit" type="submit" value="submit"> </form> </body> </html>
上のソースを見ると分かるとおり、HTMLの変更はalns:validate
属性の値がcustom
になっただけです。では、バリデーションのロジックの部分はどこに書くのでしょうか? それは、このフォームがPOSTする先のページのAlinousScriptになります。上のソースのform
タグでは、POSTする先のaction
属性が「show.html」になっているので、「ALINOUS_HOME/boxtest/show.alns」を見てみましょう。
// please put breakpoint at the next line return 0; function validate($formName, $inputName, $value, $IN, $SESSION) { if($value == ""){ return "custom"; } return 0; } function validateArray($formName, $inputName, @value, $IN, $SESSION) { // Write validation logic for array parameters here return 0; }
ここで、上のソースを見ると2つの関数があることが分かります。validate()
とvalidateArray()
関数がバリデーションのロジックになります。なぜ、2種類あるかというと、フォームのinput
タグには、値が通常の変数のものと配列のものがあるからです。通常変数のバリデーションロジックは、validate()
関数で処理され、配列のものはvalidateArray()
関数で処理されます。
次に関数について説明します。どちらの関数も引数を5個とります。validate()
とvalidateArray()
関数での違いは、第3引数がvalidate()
関数の方は普通の変数で、validateArray()
関数の方は配列(変数名が@
から始まる場合は配列を意味する)になっているところです。それぞれ引数の説明は次のようになります。
- $formName…入力されたフォームの値が入っています。
- $inputName…inputのname属性の値が入っています。これから評価する値がどのinputタグの値かを識別するためのものです。
- $value or @value…$inputNameで指定されたinputタグの値が入っています。
- $IN…入力パラメーターが入っています。
- $SESSION…セッションの値が入っています。このDOM変数にプロパティを足した場合は、セッションとして記憶されます(後述のセッションの操作参照)。
バリデーションの結果は、関数の戻り値で返します。もし、0
をreturnした場合には、バリデーションOKということになります。任意の文字列を返した時には、バリデーションはNGで、ここで返した値がエラーコードになります。
エラーコードは、どこで使うのでしょうか? それは、バリデーション失敗時のメッセージ表示の際に使います。上のコードでは、バリデーション失敗時にメッセージが表示されませんので、メッセージ表示のためのspan
タグをこれから追加します。ラジオボタンの下にある「txt」という名前のテキストボックスがバリデーションに失敗したときのエラーメッセージ表示を付け加えてみます。
<span alns:msg="txt" alns:form="testForm" alns:validate="custom"> <font color="#FF0000">テキストを入力してください</font><br> </span>
このとき、alns:validate
属性にエラーコードを入力します。これによりバリデーションチェックでエラーコードが返ってきた際、このエラーメッセージが表示されるようになります。実際のバリデーションの動きは、バリデータの関数にブレイクポイントを仕掛けてデバッガで実際に動かしてみるとよく分かると思います。バリデータ関数は、カスタムバリデータをセットしたinput
タグの個数と同じ回数呼ばれ、どのinput
タグの値を評価すべきかは、引数の$inputName
で判別します。