More than 3 years have passed since last update.

JavaScriptHack Hackフォルダ　Form編

JavaScript

Last updated at 2020-06-21Posted at 2020-05-29

1 / 2

#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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

JavaScriptHack Hackフォルダ Form編

JavaScriptHack Hackフォルダ　Form編