JavaScript Hackとは　Form編

JavaScriptはDomとFormを押さえれば、実務ではかなりいけるはずという見込みのもと記事を書いていく。
その中でもFormを取り上げる。

きちんと学ぶ事も大事だが、まごまごしている間にいわゆる英語のように単語だけを並べ立てて強引にお客さんに乗り切られ、残念な結果は避けたい。

コンテンツ

・分類する
・少しずつ例を持ってくる。
分類したものは全てカバーするとする。

分類する

・ノンバリデーション
・バリデーション
・記法の違い
・部品による違い

参考アドレスを多少変えて自分でFormを作成する。

・バリデーション

      // Form validation code will come here.
      function validate() {

         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {

            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
      </script>      
   </head>

   <body>
      <H1>AWS友の会会員登録</H1>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">

            <tr>
               <td align = "right">お名前</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>

            <tr>
               <td align = "right">メールアドレス</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>

            <tr>
               <td align = "right">コード</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>

            <tr>
               <td align = "right">出身国</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>

            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>

         </table>
      </form>

参考アドレス
https://www.tutorialspoint.com/javascript/javascript_form_validations.htm

テキストなどから例を持ってくる。

シラバスを作成する。

参考アドレス

参考資料
現代の JavaScript チュートリアル
https://ja.javascript.info/
JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう
https://www.sejuku.net/blog/28720

JavaScriptHack Hackフォルダ Form編

JavaScript Hackとは Form編