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

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>



 

 

 

まとめ

 

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

 

 

 

 

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

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

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

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

 

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




 

 

 

 

Twitterでフォローしよう

おすすめの記事