PEAR HTML_QuickForm を使ってみる2

概要

今度は先ほどの内容をクラスを使って書いてみます。
確認画面も追加して画面遷移を行っています。

クラスの作成（SecondStepQuickForm.php）

「SecondStepQuickForm」クラスを作成します。

コンストラクタ

コンストラクタでは HTML_QuickForm インスタンスを作成して、初期値を設定します。

  // コンストラクタ
  // $argAction :「送信」ボタンのリンク先
  // HTML_QuickForm インスタンスを作成
  function SecondStepQuickForm($argAction) {
    $this->_form = new HTML_QuickForm('secondForm', 'post', $argAction);
    $this->_form->_requiredNote = '<span style="color:#ff0000;">*</span> 必須入力';
  }

フォームに要素を追加

フォームの要素を追加します。送信ボタンは画面ごとに異なるため、別で設定します。

  // フォームに要素を追加
  function setItem() {
    $this->_form->addElement('header', null, 'サンプルフォーム');
    $this->_form->addElement('text', 'name', 'お名前:', array('size' => 50, 'maxlength' => 30));
  }

フォーム要素に検証ルールを追加

  // フォーム要素に検証ルールを追加
  function setRule() {
    $this->_form->applyFilter('name', 'trim');
    $this->_form->addRule('name', '名前を入力してください', 'required', null, 'client');
  }

「確認」ボタンを追加（入力画面用）

入力画面に設置する「確認」ボタンを追加します。

  // 「確認」ボタン（入力画面）
  // $argBtnName : ボタンの名前
  function setSubmit($argBtnName) {
    $this->_form->addElement('submit', $argBtnName, '確認');
  }

「戻る」、「送信」ボタンを追加（確認画面）

確認画面に設置する「戻る」、「送信」ボタンを追加します。

  // 「戻る」、「送信」ボタン（確認画面）
  // $argRtnName    : 「戻る」ボタンの名前
  // $argSubmitName : 「送信」ボタンの名前
  function setReturnSubmit($argRtnName, $argSubmitName) {
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argRtnName, '戻る'
    );
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argSubmitName, '送信'
    );
    $this->_form->addGroup($buttons, null, null, ' ');
  }

「戻る」、「送信」ボタンを$buttons配列にセットして、要素グループとして追加します。

入力値を検証する

  // 入力値を検証する
  function checkValidate() {
    return $this->_form->validate();
  }

入力値を取得する

  // 入力値を取得する
  // 戻り値：要素名と入力された値の連想配列
  function getVals() {
    return $this->_form->exportValues();
  }

画面を表示する

  // 画面を表示する
  function dispForm() {
    $this->_form->display();
  }

画面をフリーズする

  // 画面をフリーズする（確認画面、完了画面）
  function freezeForm() {
    $this->_form->freeze();
  }

表示用プログラムの作成（secondstep.php）

全体の処理の流れ、画面遷移、表示を行います。

SecondStepQuickForm オブジェクトを生成する

  require_once "./SecondStepQuickForm.php";
  $form = new SecondStepQuickForm('secondstep.php');

要素の追加と検証ルールの設定

  $form->setItem();   // 要素を追加
  $form->setRule();    // 検証ルール設定

入力画面表示

    // 入力画面表示
    $form->setSubmit('SUBMIT_INDEX');
    $form->dispForm();

確認画面表示

    // 確認画面表示
    // 検証実行
    if ($form->checkValidate()) {
      // 検証クリア時は「戻る」、「送信」ボタンを表示
      $form->setReturnSubmit('RETURN_CONF', 'SUBMIT_CONF');
      $form->freezeForm();    // 要素を凍結
    } else {
      $form->setSubmit('SUBMIT_INDEX');
    }
    $form->dispForm();      // 表示

完了画面表示

    // 完了画面表示
    if ($form->checkValidate()) {
      $valuse = $form->getVals();
      echo '<p>こんにちは、' . htmlspecialchars($valuse['name']) . 'さん。ようこそ QuickForm の世界へ!</p>';
    } else {
      $form->dispForm();      // 表示
    }

まとめ

クラスファイル（SecondStepQuickForm.php）

<?php  // /var/www/html/SecondStepQuickForm.php

  require_once "HTML/QuickForm.php";

class SecondStepQuickForm {
  var $_form;

  // コンストラクタ
  // $argAction :「送信」ボタンのリンク先
  // HTML_QuickForm オブジェクトを生成
  function SecondStepQuickForm($argAction) {
    $this->_form = new HTML_QuickForm('secondForm', 'post', $argAction);
    $this->_form->_requiredNote = '<span style="color:#ff0000;">*</span> 必須入力';
  }

  // フォームに要素を追加
  function setItem() {
    $this->_form->addElement('header', null, 'サンプルフォーム');
    $this->_form->addElement('text', 'name', 'お名前:', array('size' => 50, 'maxlength' => 30));
  }

  // フォーム要素に検証ルールを追加
  function setRule() {
    $this->_form->applyFilter('name', 'trim');
    $this->_form->addRule('name', '名前を入力してください', 'required', null, 'client');
  }

  // 「確認」ボタン（入力画面）
  // $argBtnName : ボタンの名前
  function setSubmit($argBtnName) {
    $this->_form->addElement('submit', $argBtnName, '確認');
  }

  // 「戻る」、「送信」ボタン（確認画面）
  // $argRtnName    : 「戻る」ボタンの名前
  // $argSubmitName : 「送信」ボタンの名前
  function setReturnSubmit($argRtnName, $argSubmitName) {
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argRtnName, '戻る'
    );
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argSubmitName, '送信'
    );
    $this->_form->addGroup($buttons, null, null, ' ');
  }

  // 入力値を検証する
  function checkValidate() {
    return $this->_form->validate();
  }

  // 入力値を取得する
  // 戻り値：要素名と入力された値の連想配列
  function getVals() {
    return $this->_form->exportValues();
  } 

  // 画面を表示する
  function dispForm() {
    $this->_form->display();
  }

  // 画面をフリーズする（確認画面、完了画面）
  function freezeForm() {
    $this->_form->freeze();
  }
}
?>

表示用プログラム（secondstep.php）

<?php  // /var/www/html/secondstep.php  ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>サンプルフォーム2</title>
</head>
<body>

<?php
  require_once "./SecondStepQuickForm.php";
  $form = new SecondStepQuickForm('secondstep.php');

  $form->setItem();   // 要素を追加
  $form->setRule();    // 検証ルール設定

  if ( isset($_POST['SUBMIT_INDEX']) ) {
    // 確認画面表示
    // 検証実行
    if ($form->checkValidate()) {
      // 検証クリア時は「戻る」、「送信」ボタンを表示
      $form->setReturnSubmit('RETURN_CONF', 'SUBMIT_CONF');
      $form->freezeForm();    // 要素を凍結
    } else {
      $form->setSubmit('SUBMIT_INDEX');
    }
    $form->dispForm();      // 表示
  } elseif ( isset($_POST['SUBMIT_CONF']) ) {
    // 完了画面表示
    if ($form->checkValidate()) {
      $valuse = $form->getVals();
      echo '<p>こんにちは、' . htmlspecialchars($valuse['name']) . 'さん。ようこそ QuickForm の世界へ!</p>';
    } else {
      $form->dispForm();      // 表示
    }
  } else {
    // 入力画面表示
    $form->setSubmit('SUBMIT_INDEX');
    $form->dispForm();
  }
?>

表示結果

htmlソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>サンプルフォーム2</title>
</head>
<body>

<script type="text/javascript">
//<![CDATA[
function validate_secondForm(frm) {
  var value = '';
  var errFlag = new Array();
  var _qfGroups = {};
  _qfMsg = '';
  value = frm.elements['name'].value;
  if (value == '' && !errFlag['name']) {
    errFlag['name'] = true;
    _qfMsg = _qfMsg + '\n - 名前を入力してください';
  }
  if (_qfMsg != '') {
    _qfMsg = 'Invalid information entered.' + _qfMsg;
    _qfMsg = _qfMsg + '\nPlease correct these fields.';
    alert(_qfMsg);
    return false;
  }
  return true;
}
//]]>
</script>

<form action="secondstep.php" method="post" name="secondForm" id="secondForm" onsubmit="try { var myValidator = validate_secondForm; } catch(e) { return true; } return myValidator(this);">
<div>
<table border="0">
    <tr>
    <td style="white-space: nowrap; background-color: #CCCCCC;" align="left" valign="top" colspan="2"><b>サンプルフォーム</b></td>
  </tr>
  <tr>
    <td align="right" valign="top"><span style="color: #ff0000">*</span><b>お名前:</b></td>
    <td valign="top" align="left">	<input size="50" maxlength="30" name="name" type="text" /></td>
  </tr>
  <tr>
    <td align="right" valign="top"><b></b></td>
    <td valign="top" align="left">	<input name="SUBMIT_INDEX" value="確認" type="submit" /></td>
  </tr>
  <tr>
    <td></td>
    <td align="left" valign="top"><span style="color:#ff0000;">*</span> 必須入力</td>
  </tr>
</table>
</div>
</form> 

</body>
</html>