正規表現　それぞれの値のメッセージ出力　関数でまとめてほしい

前提・実現したいこと

js　を使って　より関数でまとめる　== ""の部分など
ここに質問の内容を詳しく書いてください。
javascriptでお問い合わせフォームの値を取得し正規表現で確認するのをを作っています。
空白のとき、間違っているときにそれぞれメッセージを表示したい
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

id="p1"などそれぞれ違うので　それぞれ違う形で表示するために関数でまとめたい

エラーメッセージ

該当のソースコード

html
JavaScript
ソースコード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正規表現</title> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> <link rel="stylesheet" type="text/css" href="flash.css" /> <script> "use strict"; let myRe = /^[0-9]{3}-[0-9]{4}$/; let myRe2 = /^[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}$/; let myRe3 = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; let regex = ""; $(document).ready(function () { $("#btn").click(function () { // console.log($("#postal-code").val().match(myRe)); // console.log($("#tel").val().match(myRe2)); // console.log($("#email").val().match(myRe3)); const txt1 = $("#postal-code").val(); const txt2 = $("#tel").val(); const txt3 = $("#email").val(); var myArray = myRe.exec(txt1); var myArray2 = myRe2.exec(txt2); var myArray3 = myRe3.exec(txt3); let array = [txt1, txt2, txt3];

      console.log(myArray);
      // console.log('The value of lastIndex is ' + myRe.lastIndex);
      // console.log(myArray2);
      // console.log('The value of lastIndex is ' + myRe2.lastIndex);
      // console.log(myArray3);
      // console.log('The value of lastIndex is ' + myRe3.lastIndex);
      
      if (txt1 == "") {
        $("#p1").text("空文字です");
      } else if (txt1 != myArray) {
        $("#p1").text("入力が間違っています");
      }
      if (txt2 == "") {
        $("#p2").text("空文字です");
      } else if (txt2 != myArray2) {
        $("#p2").text("入力が間違っています");
      }
      if (txt3 == "") {
        $("#p3").text("空文字です");
      } else if (txt3 != myArray3) {
        $("#p3").text("入力が間違っています");
      }
    });
  });
</script>

</head> <body> <label><span>必須</span> 郵便番号</label> <input type="text" name="postal-code" id="postal-code" /> <tt id="p1" color="red"></tt>

<br />
<label><span>必須</span> 電話番号</label>
<input type="text" name="tel" id="tel" />
<tt id="p2" color="red"></tt>
<br />
<label><span>必須</span> メールアドレス</label>
<input type="email" name="email" id="email" />
<tt id="p3" color="red"></tt>
<br />
<button type="button" name="button" id="btn">
  <span>"確認する"</span>
</button>

</body> </html> ### 試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/09/07 08:28

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

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

回答1件

ベストアンサー

inputにrequiredやpatternを設定してください

投稿2020/09/07 10:31

yambejp

総合スコア116724

yambejp

2020/09/07 10:59

nuya

2020/09/08 06:05

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正規表現</title> <script type = "text/javascript" src="js/jquery-3.5.1.min.js"></script> <link rel="stylesheet" type="text/css" href="flash.css" /> <script> // "use strict"; const postalCodeRegex = /^[0-9]{3}-[0-9]{4}$/; //郵便番号の正規表現 const telRegex = /^[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}$/; //電話の正規表現 const emailRegex = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@[A-A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; //メールアドレスの正規表現 function check(inputElementId, warningElementId, regex) { const txt = $(inputElementId).val(); //textボックスに入力された内容を　txt定数に代入 const execResult = regex.exec(txt); //Regular Expressionの略regex exec()メソッド　指定した文字列内のマッチを検索するために実行 trueだったら代入 if (txt == "") { $(warningElementId).text("空文字です"); } else if (txt != execResult) { $(warningElementId).text("入力が間違っています"); } else { //入力が正しい場合は空文字 $(warningElementId).text(""); } } // $(document).ready(function () { // //何かしらの処理 // }); // $(function () { // //なにかしらの処理 // }); //アロー関数で省略 // ()=> $(() => { $("#btn").click(() => { check("#postal-code", "#postal-code-warning", postalCodeRegex); check("#tel", "#tel-warning", telRegex); check("#email", "#email-warning", emailRegex); }); }); </script> </head> <body> <label><span>必須</span> 郵便番号</label> <input type="text" name="postal-code" id="postal-code" required /> <span id="postal-code-warning" color="red"></span> <br /> <label><span>必須</span> 電話番号</label> <input type="text" name="tel" id="tel" required /> <span id="tel-warning" color="red"></span> <br /> <label><span>必須</span> メールアドレス</label> <input type="email" name="email" id="email" required /> <span id="email-warning" color="red"></span> <br /> <button type="button" name="button" id="btn"> <span>確認する</span> </button> </body> </html>

yambejp

2020/09/08 06:17 編集

pattern/required+input/invalidの方が制御しやすいとは思いますがこだわりもなるのでしょうから解決したならそれで構いません

nuya

2020/09/08 06:26

yambejp こ2つのセレクトボックスをそれぞれ２つのhtmlファイルにわけてjQueryとjsのみを使ってAjax通信で動的に取得したいのほうもお願いしたいです。

nuya

2020/09/08 06:26

こだわりはありません

yambejp

2020/09/08 06:45

「2つのセレクトボックスをそれぞれ２つのhtmlファイルにわけてjQueryとjsのみを使ってAjax通信で動的に取得したい」って、質問文が空ですよ