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

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

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

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

Q&A

解決済

2回答

2031閲覧

JavaScriptでif文を使って、バリデーションをかけたい

KkkRrr99

総合スコア6

JavaScript

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

0グッド

0クリップ

投稿2021/05/27 12:53

編集2021/05/28 00:33

前提・実現したいこと

JavaScriptでAjaxやjQueryを使って、登録フォームを作っています。
そこで、if文を使ってバリデーションみたいな感じにしたいのですが、どうすればいいのかわかりません。

一応、途中ですがこんな雰囲気かな??と思い書いてみたのが、下のコードのif文に当たります。employee_codeのIDを使っているのですが、これであっているのかはわかりません。

内容としては、
社員番号はnullはダメで、6文字で入力しないと登録できない。
氏名はnullはダメで、1文字以上100文字以内で入力しないと登録できない。
メールアドレスはnullはダメで、1文字以上13文字以内で、メールアドレスの形式で入力しないと登録できない。
みたいな感じでif文を使ってやりたいです。

できれば、こういう感じ書くんだよみたいな感じで、コードを書いて送ってくれると嬉しいです。

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

![イメージ説明](7c5eb4863bb9572630b327c03b017274.png)

該当のソースコード

JavaScript

1 2 //登録画面の表示 3 $("#forRegister").on("click", function() { 4 $.ajax({ 5 url: "/employee/select", 6 type: "GET", 7 contentType: "application/json", 8 }) 9 .done(function(user, textStatus, jqXHR) { 10 $("#p1").empty(); 11 $("#p1").append( 12 '<section><br><br><h2>社員登録</h2><br>' + 13 '<div><form id="form-name">' + 14 '<div class="form-group"><label> 社員番号 </label><input required type="text" class="form-control" placeholder="例 : 000001" id="employee_code" name="employee_code"></div>' + 15 '<div class="form-group"><label> 氏名 </label><input required type="text" class="form-control" placeholder="例 : 山田 太郎" id="employee_name" name="employee_name"></div>' + 16 '<div class="form-group"><label> ふりがな </label><input required type="text" class="form-control" placeholder="例 : やまだ たろう" id="furigana" name="furigana"></div>' + 17 '<div class="form-group"><label> メールアドレス </label><input required type="text" class="form-control" placeholder="例 : example@upload-gp.co.jp" id="mail_address" name="mail_address"></div>' + 18 '<div class="form-group"><label> 電話番号 </label><input required type="text" class="form-control" placeholder="例 : 000-000-000" id="tel_no" name="tel_no"></div>' + 19 '<div class="form-group"><label> 所属グループ </label><select class="form-control" id="affiliation_group" name="affiliation_group"><option value="">選択してください</option></select></div>' + 20 '<div class="form-group"><label> 役職 </label><select class="form-control" id="position" name="position"><option value="">選択してください</option></select></div>' + 21 '<div style="text-align: center; margin-top: 30px;">' + 22 '<button class="c" type="" id="register">登録する</button>' + 23 '</div></form></div></section>' 24 ); 25 for (var j = 0; j < user[0].length; j++) { 26 $("#affiliation_group").append($('<option>').html(user[0][j].name).val(user[0][j].value)); 27 } 28 for (var j = 0; j < user[1].length; j++) { 29 $("#position").append($('<option>').html(user[1][j].name).val(user[1][j].value)); 30 } 31 32 // if ($("#employee_code").val() === null || $("#employee_code").val() === "") { 33 // alert("社員番号を入力してください。"); 34 35 // } 36 // if ($("#employee_code").val().length === 6) { 37 // alert("6文字で入力してください。"); 38 39 // } 40 41 42 }) 43 .fail(function(jqXHR, textStatus, errorThrown) { 44 $("#p1").text(jqXHR.status); //例:404 45 }) 46 .always(function() {}); 47 }); 48 49 50 //登録する 51 $(document).on("click", "#register", function() { 52 if ($("#employee_code").val() === null || $("#employee_code").val() === "") { 53 alert("社員番号を入力してください。"); 54 return; 55 } 56 var json1 = { 57 employee_code: $("#employee_code").val(), 58 employee_name: $("#employee_name").val(), 59 furigana: $("#furigana").val(), 60 mail_address: $("#mail_address").val(), 61 tel_no: $("#tel_no").val(), 62 affiliation_group_code: $("#affiliation_group").val(), 63 position_code: $("#position").val(), 64 }; 65 $.ajax({ 66 url: "/employee/register", 67 type: "POST", 68 contentType: "application/json", 69 data: JSON.stringify(json1), 70 dataType: "json", 71 }) 72 .done(function(userList, textStatus, jqXHR) { 73 $("#p1").empty() 74 $("#p1").append('<h4>登録が完了しました</h4>') 75 }) 76 .fail(function(jqXHR, textStatus, errorThrown) { 77 $("#p1").text(jqXHR.status); 78 }) 79 .always(function() {}); 80 }); 81 82

java

1@RestController 2@RequestMapping("/employee") 3public class DBA_Employee_Controller { 4 5 private final Office_Worker_Service office_worker_service; 6 7 @Autowired 8 public DBA_Employee_Controller(Office_Worker_Service office_worker_service) { 9 10 this.office_worker_service = office_worker_service; 11 } 12 13 @PostMapping("/register") 14 @ResponseBody 15 public User register(@RequestBody UserForm userForm) { 16 17 User user = new User(); 18 19 user.setEmployee_code(userForm.getEmployee_code()); 20 user.setEmployee_name(userForm.getEmployee_name()); 21 user.setFurigana(userForm.getFurigana()); 22 user.setMail_address(userForm.getMail_address()); 23 user.setTel_no(userForm.getTel_no()); 24 user.setAffiliation_group_code(userForm.getAffiliation_group_code()); 25 user.setPosition_code(userForm.getPosition_code()); 26 27 office_worker_service.insert(user); 28 29 return user; 30 } 31 32 33 @GetMapping("/select") 34 @ResponseBody 35 public List<List<CodeMast>> select(){ 36 37 List<CodeMast> AffiliationGroup = office_worker_service.AllAffiliationGroup(); 38 List<CodeMast> Position = office_worker_service.AllPosition(); 39 40 List<List<CodeMast>> list = new ArrayList<List<CodeMast>>(); 41 42 list.add(AffiliationGroup); 43 list.add(Position); 44 45 return list; 46 } 47

試したこと

Validation-Engineやspringで作っているので、アノテーションなども使ってみたんですが、作り方の問題かうまくいきません。
なので、無理やりif文で書きたいです。

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

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

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

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

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

taC-h

2021/05/27 12:59

正規表現を使っても大丈夫ですか?
KkkRrr99

2021/05/27 13:01

はい、大丈夫です。
guest

回答2

0

社員番号はnullはダメで、6文字で入力しないと登録できない。
氏名はnullはダメで、1文字以上100文字以内で入力しないと登録できない。
メールアドレスはnullはダメで、1文字以上13文字以内で、メールアドレスの形式で入力しないと登録できない。

JavaScriptなしで、HTMLの属性だけでできそうですね。

  • 社員番号: required 属性、minlength="6" maxlength="6" (または pattern=".{6}")
  • 氏名: required 属性、maxlength="100"
  • メールアドレス: required 属性、type="email" maxlength="13" (13文字って短いですね...)

これらの属性を付けると、条件を満たさずにsubmitボタンが押されたときに、ブラウザがエラーを表示してフォーム送信をキャンセルします。または、お好きなタイミングで $('#form_name')[0].reportValidity() を呼ぶことでブラウザがエラーを表示して、false が返ります。

投稿2021/05/27 12:59

編集2021/05/27 14:46
int32_t

総合スコア21695

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

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

0

ベストアンサー

if文を使ったバリデーションですね。雰囲気は合っていると思います。

  • $("#employee_code")は、HTMLの要素「そのもの」を指します。

入力した値そのものは、$("#employee_code").val()とすることで取得できます。

  • 値が仮に空だとしても、nullにはなりません。空白の文字列になります。

js

1if ($("#employee_code").val() === null || $("#employee_code").val() === "") { 2 alert("社員番号を入力してください。"); 3 return; もしくは break; 4}
  • メールアドレスかどうか確認するには、正規表現を使うとできます。

「メールアドレス 正規表現」などで検索してみてください。

  • 文字列の長さは「length」プロパティで取得できます。

例: $("#employee_code").val().length === 6

まだ調べればわかる内容があると思いますので、上記の内容をもとに検索してみてください....!
(それでもわからなかったらぜひ返信で聞いてくださいね。)

投稿2021/05/27 13:03

AsPulse

総合スコア35

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

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

KkkRrr99

2021/05/27 13:24

丁寧にとてもありがとうございます!! 1文字以上100文字以内の場合は、どうやって記述すればよいでしょうか!? また、正規表現調べてみました! if ($("#mail_address").val() !== ^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA- Z0- 9-]*[a-zA-Z0-9]*.)+[a-zA-Z]{2,}$){ alery("メールアドレスの形式で入力してください")  return } こんな感じの記述で大丈夫でしょうか??
AsPulse

2021/05/27 13:32 編集

正規表現、惜しいです...! 正規表現には、それが合っているかをテストする.test()メゾットがあり、それを使います。(直接比較できません) var mailAddressChecker = /^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*.)+[a-zA-Z]{2,}$/; if( !mailAddressChecker.test($("#mail_address").val()) ){ alert("メールアドレスの形式で入力してください") } のようにつくってみてください! 一文字以上... ...val().length > 0 100文字以内... ...val().length < 101 ですね。これを両方とも満たしていればいいので、「かつ」を意味する「&&」を使って ...val().length > 0 && ...val().length < 101としてみてください!
KkkRrr99

2021/05/27 14:32

いろいろと問題が出てきて、お聞きしたいのですが (1)普通だと社員登録を押してから登録画面が表示されるの流れなので、登録画面で登録するのですが、 社員登録と押すと何もしていないのに「社員番号を入力してください。」の警告が出てしまいます。okと押すせば登録画面に移ります。 (2)普通にnullだったり文字数が違っても登録できてしまいます。alertだけだと普通に登録はできてしまうのでしょうか (3)文字数が間違っていても、「6文字で入力してください。」の警告が出ません。nullの警告も(1)で出る以外出ません。nullで登録しても出ないです。 編集して、質問のコード少し付け足しました。 springbootを使って書いていて、シングルページで作っています。 いろいろ聞いてしまって大変申し訳ございません。
AsPulse

2021/05/27 14:39 編集

(1)(2)えっと,if文を書く位置が違うのだと.... $(document).on("click", "#register", function() { この下にif文を書き、alert()を実行した後、「それより後の処理を実行しない」という意味でreturn; を入れてみてください。 $(document).on("click", "#register", function() { if ($("#employee_code").val() === null || $("#employee_code").val() === "") { alert("社員番号を入力してください。"); return; } ... のような感じですね。 (3)length === 6 だと、6の時警告を出すようになってしまうので length !== 6 とすべきです!
KkkRrr99

2021/05/27 15:03

何度もほんとに申し訳ございません。 $(document).on("click", "#register", function() { if ($("#employee_code").val() === null || $("#employee_code").val() === "") { alert("社員番号を入力してください。"); return; } としてみて、$(document).on("click", "#register", function() { の下にif文を書いてみたのですがうまくいきませんでした。 (1)の症状はなくなりましたが、(2)がダメでした。
AsPulse

2021/05/27 21:20

alert()が出るのに登録されてしまう、ということでしたら... If文を#registerのクリック下に移したソースコードを、質問文編集で書いていただけないでしょうか...
KkkRrr99

2021/05/28 00:28

編集いたしました。 何度も何度もお手数かけてしまって大変申し訳ございません。
KkkRrr99

2021/05/28 00:39

うまくいきました!! 自分のケアレスミスでした笑 本当にここまで、付き合ってもらって本当にありがとうございました! 丁寧に教えてもらってすごくに助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問