質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1422閲覧

フォームバリデーションで、バリデーションが通ったらform.submit()したい

chibimame

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/11/22 02:23

前提・実現したいこと

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したいです。

アドバイスお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

わざわざJavaScriptを書かなくても、required属性を使うだけで対応できる範囲かと思います。

投稿2021/11/22 02:30

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibimame

2021/11/22 02:34

なるほど、HTML5で直接かけるんですね???? エラーメッセージへのカスタマイズ性が薄いかなと思ったのですが、調べてみるとある程度カスタムできそうですね…???? こちらの方法でも試してみます、ありがとうございます????‍♀️
guest

0

ベストアンサー

form.querySelector('.input-invalid')null のときのみ form.submit() すると良さそうです。

投稿2021/11/22 02:27

int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibimame

2021/11/22 02:31

ありがとうございます! なるほど、エラー時につけたclass、input-invalidがない場合のみform.submit()するという意味ですね! 上手く動きました。 ありがとうございます????‍♀️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問