前提・実現したいこと
JS初心者です。
シンプルなHTMLとJavaScriptでフォームバリデーションの実装を行いたいです。
トンチンカンな質問していたらすみませんが、どうぞお力添えをお願いいたします。
<form id="contact-form"> <!--名前やメールアドレスなど--> <table> <tr> <th></th> <td> <input /> <p class="err-msg err-msg-name"></p> </td> </tr> </table> <!--個人情報保護のチェックボックス--> <div class="policy-check-btn"> <input type="checkbox" name="policy" id="policy" /> <label for="policy"><p><a href="policy.html" target="_blank">個人情報保護方針</a>に同意する</p></label> </div> <!--送信ボタン--> <button id="confirm-btn" class="confirm-btn" type="button"> <span id="confirm-txt" class="confirm-txt">確認画面へ</span> </button> </form>
試したこと
window.addEventListener( "DOMContentLoaded", () => { const form = document.querySelector(".contact-form"); const submit = document.querySelector(".confirm-btn"); submit.addEventListener( "click", (e) => { //イベントのキャンセル e.preventDefault(); //名前 const name = document.querySelector("#name"); const errMsgName = document.querySelector(".err-msg-name"); if (!name.value) { errMsgName.classList.add("form-invalid"); errMsgName.textContent = "※必須項目です。"; name.classList.add("input-invalid"); } else { errMsgName.textContent = ""; name.classList.remove("input-invalid"); } //個人情報保護方針チェックボックス const policyCheckBtn = document.querySelector(".policy-check-btn"); const errMsgPolicy = document.querySelector(".err-msg-policy"); if (confirm_check_box.classList.contains("checkbox-on") == false) { errMsgPolicy.classList.add("form-invalid"); errMsgPolicy.textContent ="※「同意する」にチェックをつけてお進みください。"; policyCheckBtn.classList.add("input-invalid"); } else { errMsgPolicy.textContent = ""; policyCheckBtn.classList.remove("input-invalid"); } form.submit(); }, false ); }, false );
クリックした時に、リンクに飛ばないようイベントをキャンセルし、バリデーションを通す。
全て通った後にform.submit()で再度submitできるようにしたいです。
ただ、上記のような書き方だとバリデーションでエラーが出たままの状態でそのままリンクに飛ぶようになるので、バリデーションエラーが出たら一度そこで止まって、全てエラーなく通過したらform.submitしたいです。
アドバイスお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/22 02:34