15. Javascriptでの検証／検証ルールの追加

Struts 15章　Javascriptでの検証／検証ルールの追加

15.1. Javascriptでのチェック

Strutsのvalidator機能を使用すれば、クライアント（Webブラウザ）のサイドでフォームへの入力値をJavascriptを用いてチェックする事ができます。submitボタンを押したときにJavascriptに入力値をチェックさせ、問題なければサーバへアクセス、問題があれば以下のようなダイアログを表示して再入力を促します。再入力の場合にはサーバへのアクセスが行われませんので、サーバの負荷軽減にも繋がります。

勿論validator機能を使用しなくてもJavascriptで入力値をチェックできるのですが、一から記述するのは非常に面倒です。validator機能とHTMLタグライブラリのjavascriptタグを使用すれば、簡単にJavascriptでの入力値チェックを実現することができます。以下のように<html:javascript>タグを使用します。

<%@ page contentType="text/html; charset=EUC-JP" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<html>
<head><html:javascript formName="productForm" /></haed>
<body>
<html:form action="..." onsubmit="return validateProductForm(this)">
<html:text property="name" /><html:errors property="name" />
<html:submit />
</html:form>
</body></html>

HTMLの<head>タグの中で<html:javascript>タグを使用します。<html:javascript>タグは入力値をチェックするためのJavascriptの関数を出力するカスタムタグで、通常Javascriptの関数は<head>タグ内に<script>タグを用いて定義するからです。またformName属性にvalidation.xmlに定義されている、対象とするActionForm名を指定します。以下はnameというプロパティを持つproductFormに対して設定したvalidation.xml（検証ルール）と、<html:javascript>タグによって出力されたJavascriptの例です。出力されるJavascriptはもっと長いものとなっていますが、必要な部分だけを抜き出して表示しています。（Struts1.2では異なりますので注意してください）

...
<form name="productForm">
  <field property="name" depends="required">
    <msg name="required" key="name.invalidate" />
  </field>
</form>
...

<script type="text/javascript" language="Javascript1.1">
<!-- Begin 
  var bCancel = false;
  function validateProductForm(form) {
    if (bCancel) 
      return true; 
    else 
      return validateRequired(form);
  }

  function required () { 
    this.aa = new Array("name", "製品名が不正です。", new Function ("varName", "this.maxlength='10'; return this[varName];"));
  }

  function validateRequired(form) {
    var isValid = true;
    var focusField = null;
    var i = 0;
    var fields = new Array();
    oRequired = new required();
    for (x in oRequired) {
      var field = form[oRequired[x][0]];
      if (field.type == 'text' ||
        field.type == 'textarea' ||
        field.type == 'file' ||
        field.type == 'select-one' ||
        field.type == 'radio' ||
        field.type == 'password') {
        var value = '';
        // get field's value
        if (field.type == "select-one") {
          var si = field.selectedIndex;
          if (si >= 0) {
            value = field.options[si].value;
          }
        } else {
          value = field.value;
        }
        if (trim(value).length == 0) {
          if (i == 0) {
            focusField = field;
          }
          fields[i++] = oRequired[x][1];
          isValid = false;
        }
      }
    }
    if (fields.length > 0) {
      focusField.focus();
      alert(fields.join('\n'));
    }
    return isValid;
  }

  ...
  
//End --> 
</script>

Javascriptによるチェックを働かせるためには、<html:form>のonsubmit属性の設定も必要です。<html:javascript>タグはチェックの為のJavascriptを出力するだけですので、それを働かせるためにはsubmitボタンが押されたときに動作するように設定する必要があります。それには最初のサンプルのように、<html:form>のonsubmit属性を設定します。以下はその部分を抜き出したものです。onsubmit属性にチェックのための関数を指定します。

<html:form action="..." onsubmit="return validateProductForm(this)">

<html:javascript>タグが出力するJavascriptでは、入力をチェックする関数の名前は「validate（validation.xmlに定義されているActionForm名）」になります。例の場合は「validateProductForm」となります。その引数に<html:form>タグが出力するform自身を表すオブジェクト「this」を指定します。またここで「return」を忘れないようにして下さい。returnが無ければ、Javascriptでのチェックを通らない場合にもsubmitが実行されます。ここまでの設定が正しく行われていれば、Javascriptによる入力値のチェックが有効となります。

なおActionFormとしてValidatorFormではなくValidatorActionFormが使用されている場合、validation.xmlに定義されている値はActionForm名ではなくAction名となっています。その場合には<html:javascript>タグのformName属性の値はAction名となります。更にこのままでは、<html:form>タグのonsubmit属性で指定する関数名に困ります。そのため<html:javascript>タグにmethod属性を指定し、これでチェックのための関数名を指定します。onsubmit属性にはこの関数名を指定することになります。

<html:javascript formName="/productInput" method="validateAction" />
...
<html:form action="/productInput" onsubmit="return validateAction(this)">

以下に<html:javascript>タグの主要な属性一覧をまとめます。

属性名	必須	スクリプト可能	説明
formName		○	入力値チェックの対象となる、validation.xmlに定義されているActionForm名またはAction名を指定する
method		○	入力値チェックを行う、Javascriptの関数名を指定する