投稿2020/02/07 14:51
jqueryで.submitを使って、フォームの内容が空の時は送信できないようにしたいです。
.submitを使ってjqueryを書いて見ましたが動かず、、、
まず、.submitが何かも分かりません。
このコードの修正をお願いします泣
jquery
1$(function() { 2 //トップへ戻るボタン 3 $('.header-right a').click(function() { 4 var id = $(this).attr('href'); 5 var position = $(id).offset().top; 6 $('html, body').animate({ 7 'scrollTop': position 8 }, 200); 9 }); 10 11 //ヘッダーのリンクボタン 12 $('.scroll-top').click(function() { 13 $('html, body').animate({ 14 'scrollTop': 0 15 },'slow'); 16 }); 17 18 //ヘッダースクロールのカラー変更 19 var imgHeight = $('.top-wrapper').outerHeight(); //画像の高さを取得。これがイベント発火位置になる。 20 var header = $('#top'); //ヘッダーコンテンツ 21 22 $(window).on('load scroll', function(){ 23 if ($(window).scrollTop() < imgHeight) { 24 //メインビジュアル内にいるので、クラスを外す。 25 header.removeClass('headerColor-default'); 26 }else { 27 //メインビジュアルより下までスクロールしたので、クラスを付けて色を変える 28 header.addClass('headerColor-default'); 29 } 30 }); 31 32 //フォーム送信内容が空の場合のエラーメッセージ 33 $('form').submit(function() { 34 // textValueが空のとき、エラー文を表示してください 35 if ($(this).children('input') === '') { 36 $('.error-message-1').text('理由を記入してください'); 37 } else { 38 $('.error-message-1').text(''); 39 alert('送信しました！'); 40 } 41 return false; 42 }); 43 44 //フォーム送信後のアラート 45 46 47 //SNSボタン 48 $('#social-icon').hover( 49 function() { 50 $(this).children('i').animate({ 51 'font-size': '16px' 52 },300); 53 }, 54 function() { 55 $(this).children('i').animate({ 56 'font-size': '12px' 57 },300); 58 } 59 ); 60 61});
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>あなたの、”やりたい”が、社会の便利に。</title> 6 <!-- font awesome読み込み--> 7 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 8 <!-- css読み込み--> 9 <link rel="stylesheet" type="text/css" href='/stylesheets/style.css'> 10 <link rel="icon" type="image/png" href="/images/logo.png"> 11 </head> 12 <body> 13 <div class="top-wrapper"> 14 <div class="container"> 15 <div class="center"> 16 <div class="top-line"> 17 <div class="think">モノ × 物</div> 18 </div> 19 <div class="sub-title">世界初の<span>”市場”</span>開かれます。</div> 20 <i class="fa fa-angle-double-down" aria-hidden="true"></i> 21 </div> 22 </div> 23 </div> 24 <div class="second" id="about"> 25 <div class="top-row"> 26 <div class="company-about">会社について</div> 27 <div class="about"><span>A</span><span>b</span><span>o</span><span>u</span><span>t</span></div> 28 </div> 29 <div class="second-row"> 30 <div class="six-point-about bdTtl">６つのポイント</div> 31 <div class="six-point"> 32 <div class="point"> 33 <div class="point-title">年会費・入会金無料</div> 34 <img src="/images/icon_point_01.png"> 35 <div class="description">無料です！</div> 36 </div> 37 <div class="point"> 38 <div class="point-title">手厚いサポート</div> 39 <img src="/images/icon_point_02.png"> 40 <div class="description">サポートさせていただきます！</div> 41 </div> 42 <div class="point"> 43 <div class="point-title">市場</div> 44 <img src="/images/icon_point_03.png"> 45 <div class="description">競りをお楽しみください。</div> 46 </div> 47 <div class="point"> 48 <div class="point-title">仮想通貨による支払い可能</div> 49 <img src="/images/icon_point_04.png"> 50 <div class="description">システムをお待ちください。</div> 51 </div> 52 <div class="point"> 53 <div class="point-title">設計</div> 54 <img src="/images/icon_point_05.png"> 55 <div class="description">「三方良し」の市場を目指します。</div> 56 </div> 57 <div class="point"> 58 <div class="point-title">ネットオークション開催</div> 59 <img src="/images/icon_point_06.png"> 60 <div class="description">オークションも開催致します！</div> 61 </div> 62 </div> 63 <div class="clear"></div> 64 </div> 65 </div> 66 <div class="fourth-row" id="guid"> 67 <div class="top-row"> 68 <div class="company-about">ご参加までの流れ</div> 69 <div class="about"><span>G</span><span>u</span><span>i</span><span>d</span></div> 70 </div> 71 <div class="second-row-cript"> 72 <div class="group-img"><img src="/images/Group24.svg"></div> 73 <div class="white-cript-hole"> 74 <div class="white-cript"> 75 ご了承くださいませ。<br> 76 </div> 77 </div> 78 </div> 79 </div> 80 <div class="fifth-row" id="price"> 81 <div class="top-row"> 82 <div class="company-about">料金体系</div> 83 <div class="about"><span>P</span><span>r</span><span>i</span><span>c</span><span>e</span></div> 84 </div> 85 <div class="second-row-price"> 86 <div class="price-img"><img src="/images/Group10.svg"></div> 87 <div class="white-price-hole"> 88 <div class="white-price"> 89 <div>以上の参加者がいた場合、料金を変更する場合がございます。</div><br> 90 </div> 91 </div> 92 </div> 93 </div> 94 <div class="six-row"> 95 <div class="top-row"> 96 <div class="company-about">無料登録フォーム</div> 97 <div class="about"><span>F</span><span>o</span><span>r</span><span>m</span></div> 98 </div> 99 </div> 100 <div class="third-row" id="register"> 101 <div class="white"> 102 <img src="/images/building.svg"> 103 <div class="form"> 104 <form id="form" method="post" action="/post"> 105 <div class="cp_iptxt cp_iptxt-1"> 106 <div class="item"> 107 <input type="text" placeholder="山田 太郎" name="userName"> 108 <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i> 109 <div class="error-message error-message-1"></div> 110 </div> 111 </div> 112 <div class="cp_iptxt cp_iptxt-2"> 113 <div class="item"> 114 <input type="text" placeholder="ヤマダ タロウ" name="kana"> 115 <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i> 116 <div class="error-message error-message-2"></div> 117 </div> 118 </div> 119 <div class="cp_iptxt cp_iptxt-3"> 120 <div class="item"> 121 <input type="text" placeholder="会社名" name="companyname"> 122 <i class="fa fa-building fa-lg fa-fw" aria-hidden="true"></i> 123 <div class="error-message error-message-3"></div> 124 </div> 125 </div> 126 <div class="cp_iptxt cp_iptxt-4"> 127 <div class="item"> 128 <input type="text" placeholder="mail" name="mail"> 129 <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i> 130 <div class="error-message error-message-4"></div> 131 </div> 132 </div> 133 <div class="cp_iptxt cp_iptxt-5"> 134 <div class="item"> 135 <input type="text" placeholder="番号" name="secondhanddealernumber"> 136 <i class="fa fa-list-ol fa-lg fa-fw" aria-hidden="true"></i> 137 <div class="error-message error-message-5"></div> 138 </div> 139 </div> 140 <!--<div class="cp_iptxt"> 141 <div class="item"> 142 <p>カード <span class="must">必須</span><br><input type="file" accept="image/*" name="attachment_file"></p> 143 </div> 144 </div> 145 --> 146 <p><input class="register-button" type="submit" value="無料登録"></p> 147 <div class="attention">※ご登録いただいた情報は厳重に保管させていただき、不当な理由で第三者に譲渡することはございません</div> 148 </form> 149 </div> 150 </div> 151 </div> 152 <script type="text/javascript" src="/javascript/jquery.js"></script> 153 </body> 154</html>
回答1件
0
ベストアンサー
「そもそもSUBMITって何？」という話であれば、
(…を)(…に)(意見・批評を求めて)提出する、提示する、寄託する、付託する、(…に)服従する、(…を)甘受する、言う、具申する
にあるように。
提出するとか提示するとかで、
IT用語的には
「送信する」ってこと
です。
すごく厳密にいうと、formのsubmitイベントは「既に送信はしてる」状態なので、
そこでチェックすると遅いとも言えます。
通常は**「送信ボタンのクリックイベントを拾ってチェックを行い、NGならreturn,OKならformをsubmit」**という対応をしたほうがより自然です。
type="submit"でボタン設置していますが、即送信ではないのでtype="button"としておいて、勝手に送信しないようにすると良いでしょう。
submitのままEvent.preventDefault()だったりreturn false;という対応もあるけど、buttonにしたほうがコードはスッキリ書けます。
ここで大事なのは
いきなりフル装備のHTML,CSS,JavaScriptでやるのではなく、装飾なしtext入力1つ・ボタン1つのミニマムコードから検証することです。
フル装備でやってしまうとコードも長くなりますし、動かなかったときの問題切り分けに時間を要してしまいます。
これは言語やフレームワーク（もしかしたらプログラミングも）限らず通じます。
思想は大きく、実装は小さくから始めるのが鉄則です。
投稿2020/02/07 20:46
総合スコア80850
あなたの回答
tips
プレビュー
Q&A
