Q&A
現状の問題点は何でしょうか
airbnbの模写を行なっています．
formの『続行する』のボタンを押した時、
電番番号のformにエラーが出るようにしたいです．
下記リンク参照ください．
html
1<div class="section-one-form signup-mordal"> 2 <i class="bi bi-x colse-modal" style="font-size: 2rem;"></i> 3 <p class="section-one-form-title"> 4 ログインまたは登録 5 </p> 6 <p class="section-one-form-subtitle"> 7 Airbnbへようこそ 8 </p> 9 <form class="section-one-forms"> 10 <div class="form-floating section-one-forms-list"> 11 <select class="form-select" id="floatingSelect" aria-label="Floating label select example"> 12 <option selected>アメリカ合衆国(＋1)</option> 13 <option value="AL">Alabama</option> 14 <option value="AK">Alaska</option> 15 <option value="AZ">Arizona</option> 16 <option value="AR">Arkansas</option> 17 <option value="CA">California</option> 18 <option value="CO">Colorado</option> 19 <option value="CT">Connecticut</option> 20 <option value="DE">Delaware</option> 21 <option value="FL">Florida</option> 22 <option value="GA">Georgia</option> 23 <option value="HI">Hawaii</option> 24 <option value="ID">Idaho</option> 25 <option value="IL">Illinois</option> 26 <option value="IN">Indiana</option> 27 <option value="IA">Iowa</option> 28 <option value="KS">Kansas</option> 29 <option value="KY">Kentucky</option> 30 <option value="LA">Louisiana</option> 31 <option value="ME">Maine</option> 32 <option value="MD">Maryland</option> 33 <option value="MA">Massachusetts</option> 34 <option value="MI">Michigan</option> 35 <option value="MN">Minnesota</option> 36 <option value="MS">Mississippi</option> 37 <option value="MO">Missouri</option> 38 <option value="MT">Montana</option> 39 <option value="NE">Nebraska</option> 40 <option value="NV">Nevada</option> 41 <option value="NH">New Hampshire</option> 42 <option value="NJ">New Jersey</option> 43 <option value="NM">New Mexico</option> 44 <option value="NY">New York</option> 45 <option value="NC">North Carolina</option> 46 <option value="ND">North Dakota</option> 47 <option value="OH">Ohio</option> 48 <option value="OK">Oklahoma</option> 49 <option value="OR">Oregon</option> 50 <option value="PA">Pennsylvania</option> 51 <option value="RI">Rhode Island</option> 52 <option value="SC">South Carolina</option> 53 <option value="SD">South Dakota</option> 54 <option value="TN">Tennessee</option> 55 <option value="TX">Texas</option> 56 <option value="UT">Utah</option> 57 <option value="VT">Vermont</option> 58 <option value="VA">Virginia</option> 59 <option value="WA">Washington</option> 60 <option value="WV">West Virginia</option> 61 <option value="WI">Wisconsin</option> 62 <option value="WY">Wyoming</option> 63 <option value="">-- CANADA --</option> 64 <option value="AB">Alberta</option> 65 <option value="BC">British Columbia</option> 66 <option value="MB">Manitoba</option> 67 <option value="NB">New Brunswick</option> 68 <option value="NF">Newfoundland and Labrador</option> 69 <option value="NT">Northwest Territories</option> 70 <option value="NS">Nova Scotia</option> 71 <option value="NU">Nunavut</option> 72 <option value="ON">Ontario</option> 73 <option value="PE">Prince Edward Island</option> 74 <option value="PQ">Quebec</option> 75 <option value="SK">Saskatchewan</option> 76 <option value="YT">Yukon Territory</option> 77 <option value="">-- AUSTRALIA --</option> 78 <option value="AC">Australian Capital Territory</option> 79 <option value="NW">New South Wales</option> 80 <option value="NO">Northern Territory</option> 81 <option value="QL">Queensland</option> 82 <option value="SA">South Australia</option> 83 <option value="TS">Tasmania</option> 84 <option value="VC">Victoria</option> 85 <option value="WS">Western Australia</option> 86 </select> 87 <label for="floatingSelect">国/地域</label> 88 </div> 89 <div class="form-floatings"> 90 <textarea class="form-control" name="tel" placeholder="(xxx)xxx-xxxx" value="(xxx)xxx-xxxx" id="floatingTextarea"></textarea> 91 <label for="floatingTextarea">電話番号</label> 92 </div> 93 </form> 94 <div class="form-floatingss"> 95 <textarea class="form-control" placeholder="メールアドレス" value="メールアドレス" id="floatingTextarea"></textarea> 96 <label for="floatingTextarea">メールアドレス</label> 97 </div> 98 <div class="section-one-form-p"> 99 番号確認のため、電話またはSMSでご連絡いたします。 SMS基本料金およびデータ通信料がかかります。 100 <a class="section-one-form-p-a" href="https://www.airbnb.jp/help/article/2855/%E5%80%8B%E4%BA%BA%E6%83%85%E5%A0%B1%E4%BF%9D%E8%AD%B7%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC"> 101 個人情報保護ポリシー 102 </a> 103 </div> 104 <div class="section-one-form-btn"> 105 続行する 106 </div> 107 <div class="section-one-form-or"> 108 <span> 109 または 110 </span> 111 </div> 112 <div class="section-one-form-facebook fgam"> 113 <a href="https://www.facebook.com/login.php?skip_api_login=1&api_key=138566025676&kid_directed_site=0&app_id=138566025676&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%3Fdisplay%3Dpopup%26response_type%3Dcode%26client_id%3D138566025676%26state%3DQEUCJPYRSPBJKBLVZQDJVYTUBOTLMO%26scope%3Demail%2Buser_birthday%2Buser_likes%2Buser_hometown%2Buser_location%2Buser_friends%26redirect_uri%3Dhttps%253A%252F%252Fwww.airbnb.jp%252Foauth_callback%26ret%3Dlogin%26fbapp_pres%3D0%26logger_id%3D06096a98-8e6e-4f19-ba7d-1f6c2aed038c%26tp%3Dunspecified&cancel_url=https%3A%2F%2Fwww.airbnb.jp%2Foauth_callback%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%26state%3DQEUCJPYRSPBJKBLVZQDJVYTUBOTLMO%23_%3D_&display=popup&locale=ja_JP&pl_dbl=0"> 114 <img class="section-one-form-logo" src="img/f_logo_RGB-Blue_58.png"> 115 <p>Facebookで続行</p> 116 </a> 117 </div> 118 <div class="section-one-form-Google fgam"> 119 <a href="https://accounts.google.com/o/oauth2/auth/oauthchooseaccount?response_type=code&access_type=offline&client_id=622686756548-j87bjniqthcq1e4hbf1msh3fikqn892p.apps.googleusercontent.com&state=IGZKAUPGTFUUYMTWEEJNYWQYSVGONG&scope=profile%20email&redirect_uri=https%3A%2F%2Fwww.airbnb.jp%2Foauth_callback&flowName=GeneralOAuthFlow"> 120 <img class="section-one-form-logo" src="img/icons8-googleのロゴ-48.png"> 121 <p>Googleで続行</p> 122 </a> 123 </div> 124 <div class="section-one-form-apple fgam"> 125 <a href="https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=com.airbnb.web&state=AQQNKKZPSLPZSNQSOPZLSDLSSFNZYN&scope=name+email&redirect_uri=https%3A%2F%2Fwww.airbnb.jp%2Foauth_callback"> 126 <img class="section-one-form-logo" src="img/apple_icon-icons.com_62745.png"> 127 <p>Appleで続行</p> 128 </a> 129 </div> 130 <div class="section-one-form-mail fgam"> 131 <i class="bi bi-envelope section-one-form-logo" style="font-size: 1.3rem;"></i> 132 <p>メールアドレスで続行</p> 133 </div> 134 <div class="section-one-form-tel fgam"> 135 <i class="bi bi-file-post-fill section-one-form-logo" style="font-size: 1.3rem;"></i> 136 <p>電話番号で続行</p> 137 </div> 138 </div>
jquery
1$(function(){ 2 $(".section-one-form").validate({ 3 rules: { 4 tel: { 5 required: true, 6 } 7 }, 8 messages: { 9 tel: { 10 required: "電話番号は必須です" 11 }, 12 } 13 }); 14});
問題点は，
『続行する』のボタンを押した際に，
電話番号のformのエラーがでない点です。
質問は編集できます。
ただ、現状だとそのボタンを押したときのイベントが書かれてないようなので何も起きないのは当然かと思います。
formがsubmitされてませんから。
ライブラリ利用でしたら取得先URLも質問本文に記載してください。
「起きている現象」も記載してくださいね。
あと「リンク内容」はあくまで「模写先」なので本件とは直接関係ないのでは？
せめて「どう関係するか」は説明欲しいです。
何のリンクか説明がないと確認するときの観点がありません。
見るのは赤の他人なので、そのあたりの配慮はお願いします。
回答1件
0
ベストアンサー
jquery-validateライブラリをご使用している前提でよろしいですか？
javascript
1<script> 2$(function(){ 3 $("form").validate(); 4 $("[required]").rules("add", { 5 required: true, 6 messages:{ 7 required: "入力必須です。", 8 }, 9 }); 10}); 11</script> 12<form> 13<div class="form-floatings"> 14<textarea class="validate" name="tel" placeholder="(xxx)xxx-xxxx" required></textarea> 15<label for="floatingTextarea">電話番号</label> 16</div> 17<input type="submit" value="send"> 18</form>
投稿2021/09/06 09:02
総合スコア116724
回答ありがとうございます。
jquery-validateライブラリを使用しています。
回答のとおりですが、なにか問題ありますか？
問題ありません。
ありがとうございました。
あなたの回答
tips
プレビュー
