「formの入力項目のチェック」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

formの入力項目のチェック

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>formの入力項目のチェック</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <style type="text/css">
  11. </style>
  13. <script type="text/javascript">
  14.   function viewModel() {
  15.     var self = this;
  16.     
  17.     // 必須項目
  18.     self.need = ko.observable({
  19.       a01: ko.observable(""),
  20.       a02: ko.observable(""),
  21.       a03: ko.observable(""),
  22.       a04: ko.observable("")
  23.     });
  24.     
  25.     // エラー
  26.     self.mess = ko.observable({
  27.       a01: ko.observable(""),
  28.       a02: ko.observable(""),
  29.       a03: ko.observable(""),
  30.       a04: ko.observable("")
  31.     });
  32.     
  33.     // 入力項目の監視
  34.     self.sendBtn = ko.computed( function()
  35.     {
  36.       // データがセットされる前なので放置でOK
  37.       if (self.need() == undefined) {
  38.         return false;
  39.       }
  40.       
  41.       // sendBtnのカウント
  42.       var cntSendBtn = 0;
  43.       
  44.       // 監視
  45.       for (var key in self.need()) {
  46.         if (self.need()[key]() == "") {
  47.           self.mess()[key](key + "は、必須項目です");
  48.           cntSendBtn++;
  49.         }
  50.         else {
  51.           self.mess()[key]("");
  52.         }
  53.       }
  54.       
  55.       if (0 < cntSendBtn) {
  56.         return false;
  57.       }
  58.       else
  59.       {
  60.         return true;
  61.       }
  62.     }, this);
  63.     
  64.   }
  66.   $(document).ready(function () {
  67.     ko.applyBindings(new viewModel());
  68.   });
  69. </script>
  71. </head>
  72. <body>
  73. <h1>formの入力項目のチェック</h1>
  74. <p>すべての項目が何か入力されていたら、ボタンの押下が可能になる。</p>
  76. <ul>
  77. <li>a01：<input type="text" data-bind="value: need().a01, valueUpdate: 'afterkeydown'" /><span data-bind="text: mess().a01"></span></li>
  78. <li>a02：<input type="text" data-bind="value: need().a02, valueUpdate: 'afterkeydown'" /><span data-bind="text: mess().a02"></span></li>
  79. <li>a03：<input type="text" data-bind="value: need().a03, valueUpdate: 'afterkeydown'" /><span data-bind="text: mess().a03"></span></li>
  80. <li>a04：<input type="text" data-bind="value: need().a04, valueUpdate: 'afterkeydown'" /><span data-bind="text: mess().a04"></span></li>
  81. </ul>
  82. <input type="submit" data-bind="enable: sendBtn" />
  86. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  87. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  88. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  89. </div>
  91. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  92. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  93. </div>
  95. </body>
  96. </html>