jQueryで要素を非表示にしたい

お疲れ様です。

質問連投すみません。

現在以下のような簡易入力フォームを作成しています。

★簡易入力フォーム★

①ページを読み込む
②CSSでエラーメッセージ表示域を非表示
③入力値を受け付ける
④エラーがあれば、そのメッセージをエラーメッセージ表示域に表示
⑤エラーがなければ、登録完了画面へ遷移

バリデートはコントローラーを使わず、jQueryのみで行います。
現状は、一度画面にエラーメッセージを表示すると、再度入力し値が正常だとしてもメッセージが残ったままなので、バリデートを行う直前にエラーメッセージ表示域を全て非表示にする処理を追加しました。（※ページを読み込んだのと同じ状態）

追加した処理は、jsに記載の「ここが問題のソース」のソースです。
これを追加したせいで、エラーメッセージが一斉表示されなくなってしまいました。

$('.display-none').hide();はccsに記載のソースと同じことを行っている認識だったのですが、違うのでしょうか。

html
1<!--氏名-->
2<div class='row'>
3    <div class='col-md-3'>
4        <label class='control-label' for='member-name'>氏名<span class='text-danger'>（必須）</span></label>
5    </div>
6    <div class='col-md-9'>
7        <input name='member-name' id='member-name' class='form-control input-md' type='text'>
8        <p class='display-none error-member-name text-danger'></p><!--エラーメッセージ表示域-->
9    </div>
10</div>
11<!--メールアドレス-->
12<div class='row'>
13    <div class='col-md-3'>
14        <label class='control-label' for='mail-address'>メールアドレス<span class='text-danger'>（必須）</span></label>
15    </div>
16    <div class='col-md-9'>
17        <input name='mail-address' id='mail-address' class='form-control input-md' type='text'>
18        <p class='display-none error-mail-address text-danger'></p><!--エラーメッセージ表示域-->
19    </div>
20</div>
21<!--電話番号-->
22<div class='row'>
23    <div class='col-md-3'>
24        <label class='control-label' for='phone-number'>電話番号<span class='text-danger'>（必須）</span></label>
25    </div>
26    <div class='col-md-9'>
27        <input name='phone-number' id='phone-number' class='form-control input-md' type='text'>
28        <p class='display-none error-phone-number text-danger'></p><!--エラーメッセージ表示域-->
29    </div>
30</div>

css
1@charset "UTF-8";
2.display-none {
3    display: none;
4}

js
1// 「登録」ボタン押下時
2$('#sign-up').on('click', function() {
3
4    // 既存エラーメッセージを非表示
5    /$('.display-none').hide();// ←ここが問題のソース
6
7    // 入力値が空、もしくは不正な値であればメッセージを表示
8
9    // 氏名
10    if ($('#member-name').val() == '') {
11        displayErrorMessage('.error-member-name', error_no_input)
12    }
13
14    // メールアドレス
15    if ($('#mail-address').val() == '') {
16        displayErrorMessage('.error-mail-address', error_no_input)
17    } else {
18        if (validateMailAddress($('#mail-address').val()) == false) {
19            displayErrorMessage('.error-mail-address', error_mail_address)
20        }
21    }
22
23    // 電話番号
24    if ($('#phone-number').val() == '') {
25        displayErrorMessage('.error-phone-number', error_no_input)
26    } else {
27        if (validatePhoneNumber($('#phone-number').val()) == false) {
28            displayErrorMessage('.error-phone-number', error_phone_number)
29        }
30    }
31
32});
33
34// エラーメッセージ表示
35function displayErrorMessage(class_name, msg) {
36    $(class_name).text(msg)
37    $(class_name).removeClass('display-none')
38};

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

回答1件

ベストアンサー

■ hide() だと不整合

jQuery の hide() は、指定した要素に「style="display: none"」を足します。これは他のスタイルシートより優先度が高いので、show() で戻すかstyle属性を変更しない限り表示されなくなります。

関数 displayErrorMessage() と整合性を取るなら、hide() の代わりに addClass('display-none') とします。

■ $('.display-none') では選択できない

関数 displayErrorMessage() で display-none クラスを外していますから、表示したエラーメッセージ要素は $('.display-none') にマッチしません。他の方法で要素を選択する必要があります。たとえば $('p.text-danger') とか。

投稿2021/02/08 01:15

編集2021/02/08 05:15