入力フォームなどの必須項目を切り替える方法

2020年11月22日 2020年11月22日

管理人

JavaScriptの有効／無効でフォームの”必須”項目の文言を切り替える方法

まず、<html> タグにクラス名「no-js」を付与します。

<!DOCTYPE html>
 <html lang="ja" class="no-js"> 
 <head>
  <!-- head内の記述 -->
 </head>
 <body>
  <!-- body内の記述 -->
 </body>
</html>

↓

<th>タグ内に”JS有効／無効時”の文言を2つとも記述し、別々のクラス名を付与します。

<!DOCTYPE html>
<html lang="ja" class="no-js"> 
<head>
<!--head内の記述-->
</head>
<body>
<table>
<tr>
<th>名前
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>カナ
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
</table>
</body>
</html>

↓

続いて、JSが有効になっている時は、「no-js」クラスが削除される様、jQueryのremoveClassメソッドを記述します。

$(function(){
$('html').removeClass('no-js');
});

最後に、表示／非表示の設定をCSS側で行います。

/* CSS側の設定*/ 
.no-js .entry_form_item_js{ display: none !important; }
.entry_form_item_no-js { display: none !important; }
.no-js .entry_form_item_no-js { display: block !important; }

↓上述のコードを全てまとめるとこんな感じ。

<!DOCTYPE html>
<html lang="ja" class="no-js"> 
<head>
<meta charset="UTF-8">
　<title>入力フォーム</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('html').removeClass('no-js');
</script>
<style type="text/css">
.no-js .entry_form_item_js{ display: none !important; }
.entry_form_item_no-js { display: none !important; }
.no-js .entry_form_item_no-js { display: block !important; }
</style>
</head>
<body>
<table>
<tr>
<th>名前
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>カナ
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
</table>
</body>
</html>

まとめ

ページの全要素にクラス名「no-js」が付与されているものの、JSが有効の時は、removeClassメソッドが呼び出され、「no-js」は削除される。
JSが無効の時は、removeClassメソッドが呼び出されない為、ページの全要素に「no-js」は付与されたまま。
JSが有効な時は「no-js」がつかない。逆に無効の時は「no-js」がつく。それを利用し、CSS側の設定で項目の表示を切り替える。

もっとWebデザインを勉強したい！！

実績No.1のオンライン・プログラミングスクール！
マンツーマンだから自分のペースで確実に習得できる・レッスン満足度94.6%！

時間と場所を選ばずに学習でき、就職/転職やキャリアについての相談が無料でできます！！

無料体験レッスンを受講すると受講料が1万円引になります！！

気になる方はコチラ↓↓↓↓↓↓↓

関連

この記事を書いた人

管理人

20代会社員　福岡県在住趣味は海外旅行！基本的にはアジア諸国ばかり行ってます。　旅のモットーは『現地在住日本人の日常生活』です！！　　　観光地ばかり巡るのではなくその国の文化などに触れることをメインとしています！！その他にも趣味は多く、野球、料理、登山、　スキューバダイビングなどなどたくさんです！！よろしくお願い致します！