JavaScriptでif文を使い、検索のバリデーションをかけたい

Question

前提・実現したいこと

JavaScriptでAjaxやjQueryを使って、検索画面や検索結果画面を作っています。
そこで、if文を使ってバリデーションをかけたいのですが、今の記述だと全部nullの状態でも検索と押すと全件検索されてしまいます。
そもそも、この記述自体があっているのかどうかもわかりません。
登録フォームなどは似たような感じでうまくいったのですが、検索だと難しいです。

内容としては
キーワードが一つも入力されなかった場合、検索できない
という風にしたいです。

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

このやり方だと動作しません。
↓

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

//nullチェック
        if ($("#employee_code", "#employee_name", "#furigana", "#mail_address", "#tel_no", "#affiliation_group", "#position").val() === null ||
            $("#employee_code", "#employee_name", "#furigana", "#mail_address", "#tel_no", "#affiliation_group", "#position").val() === "")　 {
            alert("キーワードを入力してください。");
            return;
        }

該当のソースコード

 //登録画面の表示
    $("#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="button" 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));
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                $("#p1").text(jqXHR.status); //例：404
            })
            .always(function() {});
    });


    //登録する
    $(document).on("click", "#register", function() {

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

        //社員番号の文字数チェック
        if ($("#employee_code").val().length !== 6) {
            alert("社員番号を6文字で入力してください。");　　　　　　
            return;
        }

        //氏名のnullチェック
        if ($("#employee_name").val() === null || $("#employee_name").val() === "") {
            alert("氏名を入力してください。");
            return;
        }

        //氏名の文字数チェック
        if ($("#employee_name").val().length > 100) {
            alert("氏名を100文字以内で入力してください。")
            return;
        }

        //ふりがなのnullチェック
        if ($("#furigana").val() === null || $("#furigana").val() === "") {
            alert("ふりがなを入力してください。");
            return;
        }

        //ふりがなの文字数チェック
        if ($("#furigana").val().length > 100) {
            alert("ふりがなを100文字以内で入力してください。")
            return;
        }

        //メールアドレスのnullチェック
        if ($("#mail_address").val() === null || $("#mail_address").val() === "") {
            alert("メールアドレスを入力してください。");
            return;
        }

        //メールアドレスの文字数チェック
        if ($("#mail_address").val().length > 50) {
            alert("メールアドレスを50文字以内で入力してください。");
            return;
        }

        //メールアドレスの形式チェック
        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("メールアドレスの形式で入力してください。");
            return;
        }

        //電話番号のnullチェック
        if ($("#tel_no").val() === null || $("#tel_no").val() === "") {
            alert("電話番号を入力してください。");
            return;
        }

        //電話番号の文字数チェック
        if ($("#tel_no").val().length > 13) {
            alert("電話番号を13文字以内で入力してください。");
            return;
        }

        //電話番号の形式チェック
        var telephoneChecker = /^0\d{2,3}-\d{1,4}-\d{4}$/;
        if (!telephoneChecker.test($("#tel_no").val())) {
            alert("電話番号の形式で入力してください。");
            return;
        }

        //所属のnullチェック
        if ($("#affiliation_group").val() === null || $("#affiliation_group").val() === "") {
            alert("所属を選択してください。");
            return;
        }

        //役職のnullチェック
        if ($("#position").val() === null || $("#position").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() {});
    });


    //検索画面の表示
    $("#forSearch").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>' +
                    '<div class="form-group"><label> 社員番号 </label><input type="text" class="form-control" placeholder="例 : 000001" id="employee_code"></div>' +
                    '<div class="form-group"><label> 氏名 </label><input type="text" class="form-control" placeholder="例 : 山田　太郎" id="employee_name"></div>' +
                    '<div class="form-group"><label> ふりがな </label><input type="text" class="form-control" placeholder="例 : やまだ　たろう" id="furigana"></div>' +
                    '<div class="form-group"><label> メールアドレス </label><input type=text class="form-control" placeholder="例 : [e-mail]" id="mail_address"></div>' +
                    '<div class="form-group"><label> 電話番号 </label><input type=text  class="form-control" placeholder="例 : 000-000-000" id="tel_no"></div>' +
                    '<div class="form-group"><label> 所属グループ </label><select class="form-control" id="affiliation_group"><option value="">選択してください</option></select></div>' +
                    '<div class="form-group"><label> 役職 </label><select class="form-control" id="position"><option value="">選択してください</option></select></div>' +
                    '<div style="text-align: center; margin-top: 30px;">' +
                    '<button class="c" type="button" id="search">検索する</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));
                }

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


    //検索結果画面
    $(document).on("click", "#search", function() {

        //nullチェック
        if ($("#employee_code", "#employee_name", "#furigana", "#mail_address", "#tel_no", "#affiliation_group", "#position").val() === null ||
            $("#employee_code", "#employee_name", "#furigana", "#mail_address", "#tel_no", "#affiliation_group", "#position").val() === "")　 {
            alert("キーワードを入力してください。");
            return;
        }


      

HTMLはこれで終わりです。

Comments

[m.ts10806]

HTMLも提示してください。
それに「うまくいかない」などで伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

[KkkRrr99]

これは大変失礼いたしました。

今起きてる状況を、的確に記載しました。
HTMLはコードで記載すると、一万字超えてしまうため、元々HTMLも大したこと記載してなので画像で失礼いたします。

[m.ts10806]

画像で提示されてもこちらで確認できません。
問題が起きる最小構成のコードは難しいですか？

[KkkRrr99]

HTMLとか他のコードは、構成的にバリデーションには直接関係なくて
登録フォームの所は、同じようにif文を使ってJavaScriptだけで出来ています。

聞きたいのは、
書いてる検索のif文が間違っているのか、
間違っているなら、どう違うのか。
できれば、こういう感じ書くんだよみたいな感じで、コードを書いて送ってくれると嬉しいです。

[m.ts10806]

>コードを書いて送ってくれると

あぁなるほど。質問ではなく作業依頼でしたか。それは失礼。
「質問者のコードが手元で試せるかどうか」って結構回答者には重要なのですけどね。
ではでは。

Answer 1

jQuery ですよね？

$("#employee_code", "#employee_name", ...)

の引数の指定が明らかに間違っているかと思います。(参考: https://api.jquery.com/jQuery/)

if (!$("#employee_code").val() && !$("#employee_name").val() && ...) {
    alert("キーワードを入力してください。");
    return;
}

というようにひとつずつチェックすれば良いと思います。

Comments

[KkkRrr99]

うまくいきました！！ありがとうございます。