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

Question

前提・実現したいこと

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

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

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

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

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

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

該当のソースコード

    //登録画面の表示
    $("#forRegister").on("click", function() {
        $.ajax({
                url: "/employee/select",
                type: "GET",
                contentType: "application/json",
            })
            .done(function(user, textStatus, jqXHR) {
                $("#p1").empty();
                $("#p1").append(
                    '<section><br><br><h2>社員登録</h2><br>' +
                    '<div><form id="form-name">' +
                    '<div class="form-group"><label> 社員番号 </label><input  required type="text" class="form-control"  placeholder="例 : 000001" id="employee_code" name="employee_code"></div>' +
                    '<div class="form-group"><label> 氏名 </label><input  required type="text" class="form-control" placeholder="例 : 山田　太郎" id="employee_name" name="employee_name"></div>' +
                    '<div class="form-group"><label> ふりがな </label><input  required type="text" class="form-control" placeholder="例 : やまだ　たろう" id="furigana" name="furigana"></div>' +
                    '<div class="form-group"><label> メールアドレス </label><input  required type="text" class="form-control" placeholder="例 : [e-mail]" id="mail_address" name="mail_address"></div>' +
                    '<div class="form-group"><label> 電話番号 </label><input  required type="text"  class="form-control" placeholder="例 : 000-000-000" id="tel_no" name="tel_no"></div>' +
                    '<div class="form-group"><label> 所属グループ </label><select class="form-control" id="affiliation_group" name="affiliation_group"><option value="">選択してください</option></select></div>' +
                    '<div class="form-group"><label> 役職 </label><select class="form-control" id="position" name="position"><option value="">選択してください</option></select></div>' +
                    '<div style="text-align: center; margin-top: 30px;">' +
                    '<button class="c" type="" id="register">登録する</button>' +
                    '</div></form></div></section>'
                );
                for (var j = 0; j < user[0].length; j++) {
                    $("#affiliation_group").append($('<option>').html(user[0][j].name).val(user[0][j].value));
                }
                for (var j = 0; j < user[1].length; j++) {
                    $("#position").append($('<option>').html(user[1][j].name).val(user[1][j].value));
                }

                // if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
                //     alert("社員番号を入力してください。");

                // }
                // if ($("#employee_code").val().length === 6) {
                //     alert("6文字で入力してください。");

                // }


            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                $("#p1").text(jqXHR.status); //例：404
            })
            .always(function() {});
    });


    //登録する
    $(document).on("click", "#register", function() {
        if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
            alert("社員番号を入力してください。");
            return;
        }
        var json1 = {
            employee_code: $("#employee_code").val(),
            employee_name: $("#employee_name").val(),
            furigana: $("#furigana").val(),
            mail_address: $("#mail_address").val(),
            tel_no: $("#tel_no").val(),
            affiliation_group_code: $("#affiliation_group").val(),
            position_code: $("#position").val(),
        };
        $.ajax({
                url: "/employee/register",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(json1),
                dataType: "json",
            })
            .done(function(userList, textStatus, jqXHR) {
                $("#p1").empty()
                $("#p1").append('<h4>登録が完了しました</h4>')
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                $("#p1").text(jqXHR.status);
            })
            .always(function() {});
    });

@RestController
@RequestMapping("/employee")
public class DBA_Employee_Controller {

	private final Office_Worker_Service office_worker_service;
		
	@Autowired
	public DBA_Employee_Controller(Office_Worker_Service office_worker_service) {
			
		this.office_worker_service  = office_worker_service;		
	}
		
	@PostMapping("/register")
	@ResponseBody
	public User register(@RequestBody UserForm userForm) {
			
		User user = new User();
			
		user.setEmployee_code(userForm.getEmployee_code());
		user.setEmployee_name(userForm.getEmployee_name());
		user.setFurigana(userForm.getFurigana());
		user.setMail_address(userForm.getMail_address());
		user.setTel_no(userForm.getTel_no());
		user.setAffiliation_group_code(userForm.getAffiliation_group_code());
		user.setPosition_code(userForm.getPosition_code());
			
		office_worker_service.insert(user);
			
		return user;	
	}
	
	
	@GetMapping("/select")
	@ResponseBody
	public List<List<CodeMast>> select(){
			
		List<CodeMast> AffiliationGroup = office_worker_service.AllAffiliationGroup();
		List<CodeMast> Position = office_worker_service.AllPosition();
			
		List<List<CodeMast>> list = new ArrayList<List<CodeMast>>();
			
		list.add(AffiliationGroup);
		list.add(Position);
			
		return list;
	}
	

試したこと

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

Comments

[taC-h]

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

[KkkRrr99]

はい、大丈夫です。

Answer 1

社員番号はnullはダメで、６文字で入力しないと登録できない。
氏名は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 が返ります。

Answer 2

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

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

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

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

if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
    alert("社員番号を入力してください。");
    return; もしくは break;
}

• メールアドレスかどうか確認するには、正規表現を使うとできます。

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

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

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

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

Comments

[KkkRrr99]

丁寧にとてもありがとうございます！！

１文字以上１００文字以内の場合は、どうやって記述すればよいでしょうか！？

また、正規表現調べてみました！

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]

正規表現、惜しいです...！
正規表現には、それが合っているかをテストする.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]

いろいろと問題が出てきて、お聞きしたいのですが

（１）普通だと社員登録を押してから登録画面が表示されるの流れなので、登録画面で登録するのですが、
社員登録と押すと何もしていないのに「社員番号を入力してください。」の警告が出てしまいます。okと押すせば登録画面に移ります。

（２）普通にnullだったり文字数が違っても登録できてしまいます。alertだけだと普通に登録はできてしまうのでしょうか

（３）文字数が間違っていても、「6文字で入力してください。」の警告が出ません。nullの警告も（１）で出る以外出ません。nullで登録しても出ないです。

編集して、質問のコード少し付け足しました。
springbootを使って書いていて、シングルページで作っています。
いろいろ聞いてしまって大変申し訳ございません。

[AsPulse]

(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]

何度もほんとに申し訳ございません。

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

[AsPulse]

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

[KkkRrr99]

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

[KkkRrr99]

うまくいきました！！
自分のケアレスミスでした笑

本当にここまで、付き合ってもらって本当にありがとうございました！
丁寧に教えてもらってすごくに助かりました。