モーダルで問い合わせフォームの時エラー時は閉じないようにしたい

前提・実現したいこと

モーダルを使用してお問い合わせフォームを作成しています。
・流れとしてはお問い合わせを押すとモーダル表示
・送信ボタンをクリックするとフォームの情報をconsoleに表示後閉じる

発生している問題・エラーメッセージ

・consoleと同時に閉じるのが少し気になるのですが、表示後閉じるというのは可能なのでしょうか？
・現在メールアドレスが正しくなくても閉じてしまいます

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>お問い合わせ</title>
7</head>
8<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css">
9<style>
10    #modal {
11        display: none;
12    }
13</style>
14
15<body>
16    <a href="#modal" class="show">お問い合わせ</a>
17    <div id="modal">
18        <h3>お問い合わせ</h3>
19        <form>
20            <p>お名前: <br><input id="name" type="text" name="your_name"></p>
21            <p>メールアドレス:<br> <input id="email" type="email" name="your_email"></p>
22            <p>お問い合わせ内容:<br><textarea id="textarea" name="detail" rows="2"></textarea></p>
23            <p><input type="checkbox" name="mail" value="yes">確認メールを受け取る</p>
24            <div>
25                <input type="reset" value="クリア">
26                <input id="submit" type="submit" value="送信">
27            </div>
28        </form>
29
30    </div>
31
32    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
33    <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js" integrity="sha256-e8kfivdhut3LQd71YXKqOdkWAG1JKiOs2hqYJTe0uTk=" crossorigin="anonymous"></script>
34    <script type="text/javascript">
35        $('.show').modaal();
36        ({
37            is_lockesd: true,
38        });
39        // $('#submit').click(() => {
40
41
42        // })
43        $("#submit").click(function() {
44            // 送信ボタンを押したときの処理
45            console.log('お名前：', $('#name').val());
46            console.log('メールアドレス：', $('#email').val());
47            console.log('お問い合わせ内容：', $('#textarea').val());
48            $('.show').modaal('close');
49            return false;
50            
51        });
52    </script>
53</body>
54
55</html>
56

試したこと

エラー時の対処を探しているのですが、検索ワードがそもそもこの場合どう入れるのが適切なのか悩んでいます。
現状もきれいな状態ではないかと思いますが、ご容赦ください。

###　追記

jquery
1$("#submit").click(function() {
2            // 送信ボタンを押したときの処理
3            var error; // エラー用の変数を定義
4        if ( error ) {
5            // エラーが見つかった場合
6            return false;
7        } else {
8            // エラーがなかった場合
9            return true;
10        }
11            console.log('お名前：', $('#name').val());
12            console.log('メールアドレス：', $('#email').val());
13            console.log('お問い合わせ内容：', $('#textarea').val());
14            $('.show').modaal('close');
15          
16            
17        });

これだとうまくいったのですが、consoleだけが表示されなくなりました。

行動規範の内容に同意します

回答2件

ベストアンサー

まず、オプションの指定の仕方が間違っています。

        $('.show').modaal({
            is_lockesd: true,
        });

上記のようにします。

で、送信ボタンが押された時にエラーが発生した場合というのはどういう実装にするか不明ですが、おそらくajaxでやることでしょう。
なので以下のようにすればOKだと思います。

        $("#submit").click(function() {
            // 送信ボタンを押したときの処理
            console.log('お名前：', $('#name').val());
            console.log('メールアドレス：', $('#email').val());
            console.log('お問い合わせ内容：', $('#textarea').val());
            $.ajax({ オプション })
                .then(function(){
                    // 成功時の処理
                })
                .catch(function(){ // もしくは.fail()メソッド
                    // エラー時
                    $('.show').modaal('close'); // これがモーダルを閉じる命令文
                })

            return false;
        });

投稿2021/06/25 01:49

deo_deo

総合スコア198

m.ts10806

2021/06/25 01:58 編集

確かにあの書き方だとmodaalに掛かってませんね。見通してた… ajax云々はちょっと走り過ぎな気もしますが

deo_deo

2021/06/25 02:07

> m.ts10806さん私も最初は「あれ？あってるような・・・」と思ったんですが、よくよく見てみると「あーなるほど。」と。確かにajaxは余計な感じもありますが、おそらく次は送信云々の質問が来るだろうと予測しました（笑）どのみち送信したい要求はありそうなので、ヒントくらいは・・・と（笑）

m.ts10806

2021/06/25 02:11 編集

勘違い回答してしまったので、本回答が取り上げていない別角度での回答に変更してみました。

aconnect

2021/06/25 02:14

ご回答ありがとうございます。間違い全く気が付かなかったので大変助かりました。当方ajaxなるものを始めてみるので、使い方が分からず。。。申し訳ありません

deo_deo

2021/06/25 03:35

> aconnectさんまぁ初めのうちは結構気づかないものです！ただ、プログラムは書いた通りにしか動かないので、一旦目を休めてプログラムを見直すという事も大事です。実際現場でも悩んでたものが次の日にはあっけなく解決する場合も多いです。取り急ぎ解決できたのであれば、この質問はclose（解決済み）にしてしまいましょう。

aconnect

2021/06/25 03:48

とてもご親切にご回答本当にありがとうございます。たしかに改めて見直してみることは大切ですね。それがまだ解決しておらず、、 m.ts10806様のform.submitを試みたいのですが、そもそもどう記述したらよいのかわからないのでまだ模索中です。別の方法を見つけたのですが（追記しておきます）、それだとconsoleが出ないという新たな問題が発生したので悩んでおります。

行動規範の内容に同意します

・consoleと同時に閉じるのが少し気になるのですが、表示後閉じるというのは可能なのでしょうか？

そもそもですがコンソールは一般ユーザが確認する箇所ではなく、
あくまで「アプリケーション提供側が確認するためのもの」と認識してください。
なので、コンソールへの表示と、画面への表示は別枠で考えてください。
ほぼ一瞬の出来事なのでスリープでもしない限り同時に見えます。

・現在メールアドレスが正しくなくても閉じてしまいます

クリックイベントとtype=emailによるチェックは連動していません。
検証してみましたが、submit送信は制御されてもボタンクリックは起きています。
そのためモーダルcloseが動いたのでしょう。
submit自体はformで起きますから。

ですので、そこまできちんと制御したいのでしたら
バリデーションをブラウザに任せるのではなく自身で書くことになります。

以下勘違いした回答です。スルーしてください。

type=submitだと押したら送信します。

クリックイベント冒頭にEvent.preventDefault()を入れて止めるか、type=buttonにするかして、意図的に送信しないようにしたうえで、form.submitを送りたいタイミングで実行させてください。

検索ワードがそもそもこの場合どう入れるのが適切なのか

「form 送信させない」「submit 送信させない」とかですかね。

投稿2021/06/25 01:42

編集2021/06/25 02:11

m.ts10806

総合スコア80854

m.ts10806

2021/06/25 01:55

あぁ、勘違い。

aconnect

2021/06/25 02:13

ご丁寧に回答ありがとうございます。 consoleについて、おっしゃる通りですね。そもそもお客様には関係してこないところなのでクリックイベント冒頭に入れる場合どのような記述になるのでしょう？全くの初心者で申し訳ありません。

m.ts10806

2021/06/25 02:20

入れ違いになってるかもしれませんが、後半は無視してください。 return false　されてるのでほぼ同じ効果です。

m.ts10806

2021/06/25 02:21

「なぜemail間違いでもモーダル閉じるのか」も追記してありますのでご一読を。

m.ts10806

2021/06/25 03:49

form.submitについてはリンク参照してください。

aconnect

2021/06/25 03:54

ご指摘ありがとうございます。私には記述の仕方が分からないのでform.submitの使用例を検索してみたいと思います。重ね重ね申し訳ありません。

m.ts10806

2021/06/25 04:03 編集

element（要素）についてきちんと認識したほうが良いかもしれません。分かりやすいのはformにidつけて getElementById()で取得し、submit() ※ただ、バリデーション（入力チェック）をhtmlの機能ではなく自身で書くべきというところは変わりません。 emailって割とローカルルールがあったりで、htmlがチェックするパターンに当てはまらないケースもありますので。

aconnect

2021/06/25 04:07

現在javascriptの勉強中で一部の課題をやっています。まだ全然理解が追い付いていないので、element（要素）についてもう一度復習してまいります。詳しくお教えいただきありがとうございます。

m.ts10806

2021/06/25 04:11

提示したようなリファレンスを参照するのが最も正しい情報となりますのでご参考まで。 https://developer.mozilla.org/ja/docs/Web/API/Element

行動規範の内容に同意します

あなたの回答