jQuery Logo フォームの操作

jQuery を使ったフォームの操作に関する解説やサンプルです。セレクタの使い方や値、属性の操作（取得・設定）、フォームのイベント、検証などフォームを使う際に必要な情報を掲載しています。

関連ページ：

作成日：2016年1月2日

フォーム部品のセレクタ

jQuery には、フォーム部品（コントロール）を選択するための専用のセレクタ（フィルタ）があります。jQuery の CSS セレクタでも選択することができますが、専用のセレクタを使用すると便利な場合があります。

フォーム部品（コントロール）を選択するための専用のセレクタには、以下のようなものがあります。

フォーム専用セレクタと CSS セレクタの対応表
セレクタ 内容（意味） CSS セレクタ
:input input 要素
textarea 要素
select 要素
button 要素		 input
textarea
select
button
:text 1行テキスト入力フォーム input[type='text']
:password パスワード入力フォーム部品 input[type='password']
:radio ラジオボタン input[type='radio']
:checkbox チェックボックス input[type='checkbox']
:submit 送信ボタン input[type='submit']
input[type='image']
:image イメージボタン input[type='image']
:reset リセットボタン input[type='reset']
:button ボタン button
:file ファイル選択フォーム input[type='file']
:checked チェックが入っている要素 N/A
:selected 選択されている要素 N/A 
<form id="form_sample">
<fieldset>
  <legend>input type="text"</legend>
  <div>
    <label for="your_name">Name: </label><br>
    <input type="text" name="your_name" id="your_name" value="" size="20">
  </div>
  <div>
    <label for="your_email">E-mail: </label><br>
    <input type="text" name="your_email" id="your_email" value="" size="20">
  </div>
</fieldset>
<fieldset>
  <legend>input type="radio"</legend>
  <div>
    <input type="radio" name="contact" id="email" value="email"> Email   
    <input type="radio" name="contact" id="phone" value="phone"> Phone   
    <input type="radio" name="contact" id="mail" value="mail"> Mail  
  </div>
</fieldset>
<fieldset>  
  <legend>select・option</legend>
  <div>
    <select name="area">
      <option value="manhattan">Manhattan</option>
      <option value="brooklyn">Brooklyn</option>
      <option value="queens">Queens</option>
      <option value="bronx">Bronx</option>
      <option value="staten">Staten Island</option>
    </select> 
  </div> 
</fieldset>
<fieldset> 
  <legend>input type="checkbox"</legend>
  <div>
    <input type="checkbox" name="drink" id="wine" value="wine">Wine   
    <input type="checkbox" name="drink" id="beer" value="beer">Beer  
    <input type="checkbox" name="drink" id="sake" value="sake">Sake  
  </div>
</fieldset>
<fieldset>
  <legend>textarea</legend>
  <div>
    <textarea name="comment" rows="3" cols="30" placeholder="コメント"></textarea>
  </div>
</fieldset>
  <div>
    <input type="button" value="Submit"> <input type="reset" value="Reset">
  </div>
</form>

上記のようなフォームがページに１つだけある場合に、以下のようなセレクタを指定した場合に、どのコントロールが選択するかを確認してみます。（上記のフォームは、見やすくするために一部を省略してあります）

以下のセレクタの書かれたリンクをクリックすると、そのセレクタで選択されたコントロールの色と背景色を変更します。

$(":input")

$(":text")

$(":text[name='your_email']")

$("textarea")

$("select")

$(":radio")

$(":checkbox")

$("input")

リセット

input type="text"


input type="radio"
select・option
input type="checkbox"
textarea

フォーム要素の値の操作 val()

フォーム要素に対してよく行われる操作の１つはコントロールの値（value 属性）へのアクセスですが、jQuery の val() を利用すれば簡単です。

value 属性の値を取得

val() は引数なしに使用すると、フォームに入力されているテキストや選択されている値を取得します。 値を取得する対象要素はセレクタで指定します。

$(selector).val();
val()
マッチした集合のうち最初の要素から value 属性を返します。複数選択要素なら、選択された全ての要素の配列を戻り値とします。
戻り値
フェッチした値（または値の配列）

val() メソッドは便利ですが、考慮すべき制限次項がいくつかあります。

  • もし集合の最初の要素がフォーム要素でなければ、空の文字列が返されます。
  • チェックボックスとラジオボタンにおけるチェックの有無の状態を判別しません（value 属性で定義された値をただ単に返すだけです）。
  • ラップ集合の最初の要素しか考慮に入れないので、２つ以上のコントロールがチェックされるかもしれないチェックボックスグループに対しては他の関数と組み合わせて操作する必要があります。

val() メソッドは、1個のコントロール要素から値を取得するには優れていますが、フォームの送信で送られる値の完全な集合を取得したい場合は、 val() ではなく、serialize() メソッドか serializeArray() メソッドを使うほうが良いでしょう。

対象要素（コントロール）の指定

val() は引数なしに使用すると、マッチした集合のうち最初の要素から value 属性を取得して返します。セレクタで指定した要素が複数ある場合は、マッチした最初の要素の値を取得するので、セレクタで適切に要素を指定する必要があります。

特定のコントロール（要素）を指定するには、id 属性か name 属性を使って指定することができます。（id 属性は文書内で一意、name 属性は form 要素内で一意）

複数のフォームがある場合は、それぞれのフォームに id 属性を指定して、それを使ってセレクタを指定します。

<form id="form_sample1">
<fieldset>
  <legend>input type="text"</legend>
  <div>
    <label for="your_name">Name: </label><br>
    <input type="text" name="your_name" id="your_name" value="" size="20">
  </div>
  <div>
    <input type="button" value="値を取得" name="get_name" id="get_name" > 
    <input type="reset" value="Reset">
  </div>
</fieldset>
</form>

<div id="jqs-1">
  <p>値： <span></span></p>
</div>

例えば、上記のようなフォームがページに１つだけある場合に、ボタンをクリックすると type="text" の input 要素の値を取得して div 要素（id="jqs-1"）の span 要素に表示するには以下のように記述できます。

$(":button").click(function() {  
  $("#jqs-1 p span").text($(":text").val());
});

複数のフォームが同じページにある場合は、フォーム要素の id 属性を利用して以下のように記述します。

$("#form_sample1 :button").click(function() {  
  $("#jqs-1 p span").text($("#form_sample1 :text").val());
});

同じフォーム内に複数の type="text" の input 要素がある場合は、どの input 要素かを明確にするために input 要素の name 属性か id 属性を利用します。 

// name 属性を利用
$("#form_sample1 :button").click(function() {  
  $("#jqs-1 p span").text($("#form_sample1 [name='your_name']").val());
});
// id 属性を利用
$("#form_sample1 :button").click(function() {  
  $("#jqs-1 p span").text($("#your_name").val());
});

また、もし複数のボタンがある場合は、ボタンも name 属性か id 属性を利用して指定する必要があります。

$("#form_sample1 :button[name='get_name']").click(function() {  
  $("#jqs-1 p span").text($("#form_sample1 [name='your_name']").val());
});
$("#form_sample1 #get_name").click(function() {  
  $("#jqs-1 p span").text($("#form_sample1 [name='your_name']").val());
});

この他にもセレクタの指定方法はいろいろありますが、状況に応じて適切にセレクタを指定する必要があります。

input type="text"

値：

input type="text" / textarea の値の取得

1行テキストフィールド（input type="text"）やテキストエリア（textarea）の値を取得するには、目的のコントロールをセレクタで指定して、val() で取得します。

<form action="" method="post">
<fieldset>
  <legend>input type="text"</legend>
  <div>
    <label for="your_name">Name: </label><br>
    <input type="text" name="name" value="" size="20">
  </div>
  <div>
    <label for="your_email">E-mail: </label><br>
    <input type="text" name="email" value="" size="20">
  </div>
</fieldset>
<fieldset>
  <legend>textarea</legend>
  <div>
    <textarea name="comment" rows="3" cols="30"></textarea>
  </div>
</fieldset>
  <div>
    <input type="button" value="Get Name" name="get_name">
    <input type="button" value="Get Email" name="get_email"> 
    <input type="button" value="Get Comment" name="get_comment">  
    <input type="reset" value="Reset">
  </div>
</form>
<div id="jqs-2">
  <p>値： <span></span></p>
</div>
var value = ""; 
$(":button[name='get_name']").click(function() {  
  value = $("[name='name']").val();
  $("#jqs-2 p span").text(value);
});
$(":button[name='get_email']").click(function() {  
  value = $("[name='email']").val();
  $("#jqs-2 p span").text(value);
});
$(":button[name='get_comment']").click(function() { 
   value =  $("[name='comment']").val();
  $("#jqs-2 p span").text(value);
});
input type="text"


textarea

値：

要素に id 属性を指定していれば、id 属性を使ったセレクタで値を取得することもできます。

<input type="text" name="email" id="email" value="" size="20">
          
//上記の場合以下で値を取得可能
value = $("#email").val();

以下は、メールアドレスを２回入力してもらい入力内容が一致するかを確認するサンプルです。

<form>
  <div>
    <label for="email-1">E-mail: </label><br>
    <input type="text" name="email-1" id="email-1" value="" size="20">
  </div>
  <div>
    <label for="email-2">E-mail（確認）:<span></span> </label><br>
    <input type="text" name="email-2" id="email-2" value="" size="20">
  </div>
  <div>
    <input type="button" value="送信"> 
    <input type="reset" value="Reset">
  </div>
</form>

それぞれの type="text" の input 要素の値を val() で取得して、比較します。もし値が異なれば、span 要素に「メールアドレスが一致しません。」と表示し、return false; で送信を停止します。

また、２行目で最初に span 要素のテキストを空にしています。この処理をしないと、「メールアドレスが一致しません。」というメッセージが表示され続けてしまいます。

$(":button").click(function() { 
  $("label[for='email-2'] span").text("");
  if($("input[name='email-1']").val() != $("input[name='email-2']").val()) {
    $("label[for='email-2'] span").text("メールアドレスが一致しません。").css('color', 'red');
    return false;
  }
});


以下は、テキストエリアで on() を使って keydown keyup change イベントを検知して、ユーザーの入力した文字数を表示する例です。

<form>
  <div>
    <textarea name="comment" rows="3" cols="30" placeholder="コメント"></textarea>
  </div>
  <p><span id="count"></span>/200</p>
</form>
$("textarea").on('keydown keyup change', function() {
  var count = $(this).val().length;
  $("#count").text(count);
  if(count > 200) {
    $("#count").css({color: 'red', fontWeight: 'bold'});
  }else{
    $("#count").css({color: '#333', fontWeight: 'normal'});
  }
});

keydown keyup change のいずれかのイベントが発生したら、テキストエリア内の文字数を取得して、span 要素に表示します。また、文字数が200を超えたら色と文字の太さを変更しています。

/200

input type="radio" の値の取得

ラジオボタン（input type="radio"）の場合、val() は value 属性で定義された最初の値をただ単に返すだけで、ラジオボタンにおけるチェックの有無の状態を判別しません。

そのため、チェックされている値を取得するためには、「チェックが入っている要素」をフィルタする「:checked」というセレクタと組み合わせます。

ラジオボタンがそのフォームに１つだけの場合、以下のようにすると値を取得できます。

$(':radio:checked').val()

ラジオボタンがそのフォームに複数ある場合は、 name 属性を使って目的のラジオボタンを指定する必要があります。

<form action="" method="post">
<fieldset>
  <legend>input type="radio"</legend>
  <div><p>name="contact"</p>
    <input type="radio" name="contact" id="email" value="email">Email 
    <input type="radio" name="contact" id="phone" value="phone">Phone   
    <input type="radio" name="contact" id="mail" value="mail">Mail
  </div>
  <div><p>name="commute"</p>
    <input type="radio" name="commute" id="subway" value="subway">Subway 
    <input type="radio" name="commute" id="bus" value="bus">Bus 
    <input type="radio" name="commute" id="walk" value="walk">Walk
  </div>
</fieldset>
  <div>
    <input type="button" value="Get Contact Value" name="get_contact">
    <input type="button" value="Get Commute Value" name="get_commute">
    <input type="reset" value="Reset" class="btn1">
  </div>
</form>
<div id="jqs-3">
  <p>値： <span></span></p>
</div>
$("[name='get_contact']").click(function() { 
   value =  $("[name='contact']:checked").val();
  $("#jqs-3 p span").text(value);
});
$("[name='get_commute']").click(function() { 
   value =  $("[name='commute']:checked").val();
  $("#jqs-3 p span").text(value);
});
input type="radio"

name="contact"

name="commute"

値：

input type="checkbox" の値の取得

val() はラップ集合の最初の要素しか考慮に入れないので、２つ以上のコントロールがチェックされるかもしれないチェックボックスグループの場合は、:checked と map() を利用して選択されている値を取得します。

:checked は、ラジオボタンやチェックボックスでチェックが入っている要素のみを選択します。

<form action="" method="post">
<fieldset>
  <legend>input type="checkbox"</legend>
  <div>
    <input type="checkbox" name="drink" value="wine">Wine  
    <input type="checkbox" name="drink" value="beer">Beer 
    <input type="checkbox" name="drink" value="sake">Sake
    <input type="checkbox" name="drink" value="vodka">Vodka 
    <input type="checkbox" name="drink" value="gin">Gin 
  </div>
</fieldset>
  <div>
    <input type="button" value="Get Value" > 
    <input type="reset" value="Reset">
  </div>
</form>

<div id="jqs-4">
  <p>値： <span></span></p>
</div>

map() の戻り値は、 jQuery でラップされた配列になっているので、普通の並列として扱うには、get() または toArray() を使って変換します。

$(":button").click(function() { 
   value =  $("[name='drink']:checked").map(function() {
     return $(this).val();
   }).toArray();
  $("#jqs-4 p span").text(value);
});
input type="checkbox"

値：

$.map() メソッドと toArry() メソッドを使って以下のように書くこともできます。

$(":button").click(function() { 
  value = $.map($("[name='drink']:checked").toArray(), function(value) {
    return $(value).val();
  });
  $("#jqs-4 p span").text(value);
});

select・option の値の取得

セレクトメニューで選択されている値を取得するには、対象のセレクトメニューを name 属性などを使って選択して、val() を使用します。

<form action="" method="post">
<fieldset>
  <legend>select・option</legend>
  <div>
    <select name="area">
      <option value="manhattan">Manhattan</option>
      <option value="brooklyn">Brooklyn</option>
      <option value="queens">Queens</option>
      <option value="bronx">Bronx</option>
      <option value="staten">Staten Island</option>
    </select> 
  </div>
</fieldset> 
  <div>
    <input type="button" value="Get Value"> 
    <input type="reset" value="Reset">
  </div>
</form>

<div id="jqs-5">
  <p>値： <span></span></p>
</div>
$(":button").click(function() { 
   value =  $("[name='area']").val();
  $("#jqs-5 p span").text(value);
});
select・option

値：

multiple 属性が指定されている場合

multiple 属性が指定されていて、複数の項目が選択できる場合でも、単純に val() を使って選択されている値を取得することができます。複数の項目が選択できる場合は、返される値は配列になります。

<form action="" method="post">
<fieldset>
  <legend>select・option</legend>
  <div>
    <select name="area" multiple>
      <option value="manhattan">Manhattan</option>
      <option value="brooklyn">Brooklyn</option>
      <option value="queens">Queens</option>
      <option value="bronx">Bronx</option>
      <option value="staten">Staten Island</option>
    </select> 
  </div> 
</fieldset>
  <div>
    <input type="button" value="Get Value"> 
    <input type="reset" value="Reset"">
  </div>
</form>
<div id="jqs-5-2" class="jqs_div">
  <p>値： <span></span></p>
</div>
$(":button").click(function() { 
   value =  $("[name='area']").val();
  $("#jqs-5-2 p span").text(value);
});
select・option

値：

※ multiple が指定してある select 要素で .val() を使って値を取得する際に、何も選択されていない場合、jQuery3.0 未満では null が返されましたが、jQuery3.0 からは空の配列（[]）を返すようになっています。

jQuery Core 3.0 Upgrade Guide

表示文字列を取得する

選択されている value 属性の値ではなく、選択されている option 要素の文字列を取得するには、option 要素の text() を利用します。

選択されている option 要素は、option:selected でフィルタできるので、そのテキストを取得します。

複数選択されている場合は、テキストが結合された形（文字列）で返されます。

<form action="" method="post">
<fieldset>
  <legend>select・option</legend>
  <div>
    <select name="area" multiple>
      <option value="manhattan">Manhattan Area</option>
      <option value="brooklyn">Brooklyn Area</option>
      <option value="queens">Queens Area</option>
      <option value="bronx">Bronx Area</option>
      <option value="staten">Staten Island Area</option>
    </select> 
  </div> 
</fieldset>
  <div>
    <input type="button" value="Get Value"> 
    <input type="reset" value="Reset">
  </div>
</form>
<div id="jqs-5-3" class="jqs_div">
  <p>値： <span></span></p>
</div>
$(":button").click(function() { 
   value =  $("[name='area'] option:selected").text();
  $("#jqs-5-3 p span").text(value);
});
select・option

値：

input type="file" の値の取得

<input type="file"> 要素で選択されたファイルのリストは、FileList プロパティ（オブジェクト）に格納されています。<input type="file"> 要素ノードは、このリストの項目にアクセスするためのファイルの配列（のようなもの）を持っています。（以下の例は、複数のファイルを選択できるように multiple 属性を指定しています）

<input type="file" id="file_input" multiple>

上記のような HTML がある場合、以下のコードは、ファイルリスト内の最初のファイルを File オブジェクトとして取得します。

var file = document.getElementById('file_input').files[0];

FileList は配列のようなものなので、 length プロパティを使用して選択されたファイルの長さ（数）を取得することが可能です。また、File オブジェクトには、ファイル名、ファイルサイズ、ファイル MIME タイプなどのプロパティがあります。

プロパティ 概要
name ファイルの名前
size ファイルの長さ（バイト）
type ファイルの MIME タイプ
lastModified ファイルが最後に変更された日時を表す数値（UNIX 時刻からの経過ミリ秒数）

 

以下は、change イベントを使って選択されたフィルを表示する例です。

$("#file_input").on("change", function() {
  var files = document.getElementById("file_input").files;
  var file_list = "";
  for(var i=0; i<files.length; i++){
    if(i !== files.length - 1) {
      file_list += files[i].name + ", " ;
    }else {
      file_list += files[i].name ;
    }
  }
  document.getElementById("selected_files").innerHTML = file_list;
})
<input type="file" id="file_input" multiple>
<p>選択されたフィル：<span id="selected_files"></span></p>

選択されたフィル：

以下は、選択されたファイル名、サイズ、MIME タイプを表示する例です。

$("#file_input2").on("change", function() {
  var files = document.getElementById("file_input2").files;
  var file_list = "";
  for(var i=0; i<files.length; i++){
    file_list += files[i].name + " / " + files[i].size + "byte / " + files[i].type + "<br>" ;
  }
  document.getElementById("selected_files2").innerHTML = file_list;
})
<input type="file" id="file_input2" multiple>
<p>選択されたフィル：<span id="selected_files2"></span></p>

選択されたフィル：

参考ページ：「input type="file" - MDN - Mozilla」「Web アプリケーションからファイルを扱う」「FileList」

value 属性の値の変更

val() メソッドのパラメータに値を指定すると、value 属性の値をその指定した値に変更することができます。

val(value)

渡された値（value）を、マッチした全てのフォーム要素の値として設定します。

value（String|Function）　
ラップ集合の各フォーム要素の value プロパティに設定すべき値を指定します。関数の場合、ラップ集合の各要素について、その関数が呼び出されます。関数コンテクスト（this）としてその要素が渡され、要素のインデックスと、その要素の現在の値とが２つのパラメータで渡されます。この関数から返された値が、設定すべき値となります。
戻り値
ラップ集合

以下は、クリアというボタンをクリックすると、val("") を実行して入力されている値を空にするサンプルです。

<form action="" method="post">
<fieldset>
  <legend>input type="text"</legend>
  <div>
    <label for="your_name">Name: </label><br>
    <input type="text" name="your_name" value="" size="20">
    <input type="button" value="クリア" name="clear_name">
  </div>
</fieldset>
<fieldset>
  <legend>textarea</legend>
  <div>
    <textarea name="comment" rows="3" cols="30" placeholder="コメント"></textarea><br>
    <input type="button" value="クリア" name="clear_comment"">
  </div>
</fieldset>
  <div>
     <input type="reset" value="Reset">
  </div>
</form>
$(":button[name='clear_name']").click(function() { 
   $("[name='your_name']").val("");
});
 $("[name='clear_comment']").click(function() { 
   $("[name='comment']").val("");
});
input type="text"

textarea

フォームデータのシリアライズ

フォームの値をまとめて取得するには、serialize(), serializeArray() を利用します。

serialize()

serialize() メソッドは、フォームのコントロールに入力された全てのデータを標準 URL の形式 (application/x-www-form-urlencoded)でシリアライズ（変換）したクエリ文字列として返します。（値は encodeURIComponent() 関数でエンコードされます。）

serialize()

serialize() メソッドは、ラップ集合の中にある（あるいは、ラップ集合に含まれるフォームの中にある）全ての適格なフォーム要素から、適切にフォーマットされ、エンコーディングされたクエリ文字列を作成します。

パラメータ
なし
戻り値
フォーマットされたクエリ文字列
  • serialize() メソッドは、ラップ集合の中にあるフォームコントロールだけから情報を収集し、しかも適格と見なされた要素のみを対象とします。
  • 適格なコントロールとは、HTML 仕様書のルールに従って、フォーム送信の一部に含められるもののことです。
  • チェックされていないチェックボックスやラジオボタン、 選択されていないドロップダウンリスト、禁止されているコントロールは、適格と見なされず、フォームの送信に含まれないので、serialize() はこれらも 無視します。
<form id="form_sample7" action="" method="post">
<fieldset>
  <legend>input type="text"</legend>
  <div>
    <label for="your_name">Name: </label><br>
    <input type="text" name="your_name" value="" size="20">
  </div>
  <div>
    <label for="your_email">E-mail: </label><br>
    <input type="text" name="your_email" value="" size="20">
  </div>
</fieldset>
<fieldset>
  <legend>input type="radio"</legend>
  <div>
    <input type="radio" name="contact" value="email">Email 
    <input type="radio" name="contact" value="phone">Phone  
    <input type="radio" name="contact" value="mail">Mail
  </div> 
</fieldset> 
<fieldset>
  <legend>select・option</legend>
  <div>
    <select name="area">
      <option value="manhattan">Manhattan</option>
      <option value="brooklyn">Brooklyn</option>
      <option value="queens">Queens</option>
      <option value="bronx">Bronx</option>
      <option value="staten">Staten Island</option>
    </select> 
  </div> 
</fieldset>
  <div>
    <input type="button" value="Serialize" name="serialize">
    <input type="button" value="SerializeArray" name="serizlizeArray">
    <input type="reset" value="Reset">
  </div>
</form>
<div id="jqs-7">
  <p>値： <span></span></p>
</div>

以下は、name 属性の値が「serialize」というボタンをクリックすると、form_sample7 という id 属性のフォームのデータを serialize() を使ってシリアライズして表示するサンプルです。

$("#form_sample7 [name='serialize']").click(function() { 
  var serialize_data = $("#form_sample7").serialize();
  $("#jqs-7 p span").text(serialize_data);
});
input type="text"


input type="radio"
select・option

値：

serialize() メソッドは、form 要素に対してだけではなく任意の DOM 要素に対して適用できるので、form 全体ではなく、任意の input 要素だけを選択して serialize() することもできます。

serializeArray()

フォームデータを（クエリ文字列ではなく）、JavaScript 配列に入れたい場合には、serializeArray() を使用します。

serializeArray()

serializeArray() メソッドは、全ての適格なフォームコントロールの値をコントロールの名前と値を含むオブジェクトの配列にして収集します。

パラメータ
なし
戻り値
フォームデータの配列

serializeArray() が返す配列は、それぞれ name プロパティと value プロパティを1個ずつ含む匿名のオブジェクトインスタンスで構成されます。（これは load() メソッドに対して要求パラメータのデータを渡すのに適したフォーマットになっています。）

以下は、name 属性の値が「serializeArray」というボタンをクリックすると、form_sample7 という id 属性のフォームのデータを serializeArray() を使ってシリアライズされたデータを表示するサンプルです。

serializeArray() の戻り値 serialize_array_data はオブジェクトの配列になっているので、for 文でループしてそれぞれのプロパティ（name プロパティと value プロパティ）を表示しています。

実際のサンプルは前述のサンプルを参照してください。

$("#form_sample7 [name='serializeArray']").click(function() { 
   var serialize_array_data = $("#form_sample7").serializeArray();
   console.log(serialize_array_data); //コンソールに取得した値を出力
   var data = ""
   for(var i = 0; i < serialize_array_data.length; i++) {
     data += "name: " + serialize_array_data[i].name + " ,  value: " + serialize_array_data[i].value + "<br>";
   }
   $("#jqs-7 p span").html(data);
});

コンソールには以下のような形で表示されます。

[Object { name="your_name",  value="Jonny Smith"}, Object { name="your_email",  value="jsmith@exapmle.com"}, Object { name="contact",  value="email"}, Object { name="area",  value="staten"}]

フォームのイベント

フォームの操作により発生するイベントに関して。その他のイベント処理に関しては「イベント」を参照ください。

フォーカス focus()

focus イベントは通常、マウスなどのポインティングデバイスやタブキーで要素が選択された（フォーカス）状態になった際に呼び出されます。

$(セレクタ).focus(function(e){
    指定した要素がフォーカスされた時に実行する処理
});

以下は input 要素がフォーカスされたときに、背景色を変更するサンプルです。

<label for="your_name">Name: </label><br>
<input type="text" name="your_name" id="your_name" value="" size="20">
$("[name='your_name']").focus(function() {
  $(this).css("background-color", "#C0EDF3");
});

このサンプルでわかるように、フォーカスが外れた場合にも背景色は変更されたままになってしまいます。

フォーカスが外れたことを検知するには、blur() を利用します。

指定した要素にフォーカスを与える

focus() メソッドは引数なしで実行すると、指定した要素にフォーカスを与えます。以下はページを開くと、すでに input 要素がフォーカスされているサンプルです。 

<label for="your_name">Name: </label><br>
<input type="text" name="your_name" id="your_name" value="" size="20">
$(":text[name='your_name']").focus();

フォーカスが外れた際 blur()

blur() は focus() とは反対に、フォームのコントロールからフォーカスが外れた（非選択状態）を検知します。

$(セレクタ).blur(function(e){
    指定した要素のフォーカスが外れた時に実行する処理
});

以下は input 要素がフォーカスされたときに、背景色を変更し、フォーカスが外れた際には、背景色を元に戻すサンプルです。

<label for="your_name">Name: </label><br>
<input type="text" name="your_name" id="your_name" value="" size="20">

focus() に続いて、メソッドチェーンで blur() を追加しています。

背景色に限らず、css() で設定した値を初期値に戻すには、css("background-color", "") のように値を設定せずにプロパティ名だけを指定します。

$("#form_sample9 :text[name='your_name']").focus(function() {
  $(this).css("background-color", "#C0EDF3");
}).blur(function() {
  $(this).css("background-color", "");
})

以下は、パスワード入力フォームがフォーカスされると、input 要素の後に「パスワードは8文字以上で入力してください」と表示するサンプルです。

Password: <input type="password" name="pw" value="" size="20">
$(":password").focus(function() {
  $(this).after("<p class='pws'>パスワードは8文字以上で入力してください。</p>");
}).blur(function() {
  $("p.pws").remove();
});
Password:

以下は、input 要素の value 属性に「名前を入力してください」と表示しておいて、input 要素がフォーカスされると value 属性の値を空にします。

フォーカスが外れた際は、フォームに値が入力されているかどうかを判定して、value 属性が空の場合は、再度「名前を入力してください」と表示し、値が入力されている場合は、何もしません。

但し、フォーカスされた時のイベントは、イベント発生時に一度だけ処理を実行する one() イベントを利用しています。（input 要素がフォーカスされる度にフォームを空にする処理を実行すると、ユーザーが入力した内容が削除される可能性があるため）

<label for="your_name">Name: </label><br>
<input type="text" name="your_name" id="your_name" value="" size="20">
$("[name='your_name']").val("お名前を入力してください").css("color", "#DDD").one("focus", function() {
  $(this).val("").css("color", "#333");
}).blur(function() {
  if($(this).val() == "") {
    $(this).val("お名前を入力してください").css("color", "#DDD").one("focus", function() {
      $(this).val("").css("color", "#333");
    });
  }
});

これと同様のことは、HTML5 の placeholder 属性を利用すれば行えます。

<label for="your_name">Name: </label><br>
<input type="text" name="your_name" id="your_name" placeholder="Type your name." value="" size="20">

フォームの内容が変更された際 change()

change() は、フォームの内容（フォーム部品の値）が変更されたことを検知して命令を実行します。

内容が変更されたかどうかは、該当するコントロールからフォーカスが外れたタイミングで判断されます。

$(セレクタ).change(function(e){
    指定した要素のフォームの内容が変更された時に実行する処理
});

以下はセレクトボックスの選択行が変更されると、option 要素の value 属性の値を val() で読み出して、読み出した値でラベル要素のテキストを変更するサンプルです。

また、option 要素に title 属性を指定しておき、その値を利用して placeholder 属性の値も変更しています。

コンタクト方法：
<p>
  <select>
    <option value="Email アドレス" title="メールアドレスを入力" selected>Email</option>
    <option value="電話番号" title="電話番号を入力">Phone</option>
  </select>
</p>
<p>
  <label for="contact_method">Email アドレス: </label><br>
  <input type="text" name="contact_method" id="contact_method" placeholder="メールアドレスを入力" value="" size="20">
</p> 
$("select").change(function() {
  $("label[for='contact_method']").text($(this).val());
  $("#contact_method").attr("placeholder", $("option:selected").attr("title"));
});
コンタクト方法：


入力後自動フォーカスさせる

以下は、change と keyup イベントを利用して、入力後自動フォーカスさせるサンプルです。

米国の電話番号（3桁-3桁-4桁）を入力することを想定したインプット要素で、maxlength 属性でそれぞれの入力最大文字数を指定しておきます。

<input type="text" name="tele1" id="tele1" value="" size="3" maxlength="3" class="form-control"> 
<input type="text" name="tele2" id="tele2" value="" size="3" maxlength="3" class="form-control">
<input type="text" name="tele3" id="tele3" value="" size="4" maxlength="4" class="form-control">

複数のイベントリスナー（change と keyup）をまとめて設定するため、 on() を使って設定します。また、正規表現で数値の値（[0-9]）と文字数（{3}）を指定しています。

$('input[name=tele1]').on('change keyup', function(){
  // 半角数字3文字
  if ($(this).val().match(/^[0-9]{3}$/)) {
    // 次の入力欄にフォーカスを移動
    $('input[name=tele2]').focus();
  }
}); 
$('input[name=tele2]').on('change keyup', function(){
  if ($(this).val().match(/^[0-9]{3}$/)) {
    $('input[name=tele3]').focus();
  }
});

Telephone number:

選択されたラジオボタンのラベルの色を変更

以下は、クリックされたラジオボタンと対になっている label 要素の文字色を変更するサンプルです。

label 要素は for 属性にラジオボタンの id 属性と同じ値を持っています。

<form action="" method="post">
<fieldset>
  <legend>input type="radio"</legend>
  <p>Language:
    <input type="radio" name="lang" id="java" value="java"><label for="java"> Java </label>  
    <input type="radio" name="lang" id="php" value="php"><label for="php"> PHP </label>  
    <input type="radio" name="lang" id="c" value="c"><label for="c"> C++ </label> 
    <input type="radio" name="lang" id="js" value="js"><label for="js"> JavaScript </label> 
  </p>
</fieldset>
</form>

一度チェックを入れたラジオボタンの色がそのまま残らないように、最初に $("label").css("color", ""); で、全ての label 要素の文字色をいったん初期値に戻しています。

$(":radio").change(function() {
  $("label").css("color", "");
  $("label[for='" + $(this).attr("id") + "']").css("color", "#39984A");
});
input type="radio"

Language:

但し、上記の方法の場合、古いバージョンの IE ではうまく機能しません。古いバージョンの IE でも機能するようにするには、ラジオボタンとラベルの両方に click イベントを利用して以下のように記述します。

$(":radio").click(function() {
  $("label").css("color", "");
  $("label[for='" + $(this).attr("id") + "']").css("color", "#39984A");  
});
$("label").click(function() {
  $("label").css("color", "");
  $(this).css("color", "#39984A");  
});

change イベントは、該当するコントロールからフォーカスが外れたタイミングで値が変更されたかどうかを判定しますが、古い IE の場合ラジオボタンをクリックしただけでは、ラジオボタンにフォーカスが残ってしまい、意図したような change イベントの処理が動作しないためです。

submit()

submit() は、フォームの送信ボタンがクリックされた時に発生する submit イベントの処理を設定します。

フォームの送信ボタン（type 属性が submit または image の input 要素）がクリックされると、その form 要素に記述されている action 属性の URL に対して、form 要素内のコントロールに入力・選択されている情報を送信します。

送信ボタンがクリックされた後、データを action 属性の URL に送信する前に、設定した処理を実行するのが submit() です。

設定した処理が実行されると、action 属性の URL にデータが送信されますが、submit イベントの処理の中で、 return false を記述すると送信をキャンセルできます。

以下は、送信ボタンがクリックされると、必須項目の「お名前」の値（name 属性の値が「name」の input 要素の val()）を調べて、未入力の場合はエラーメッセージを表示するサンプルです。

<form id="form_sample" action="check.php" method="post">
  <div>
    <label for="name">お名前（必須）</label><br>
    <input type="text" name="name" id="name" value="" size="20">
  </div>
  <div>
    <label for="email">メールアドレス</label><br>
    <input type="text" name="email" id="email" value="" size="20">
  </div>
  <div>
  <label for="comment">コメント</label><br>
    <textarea name="comment" id="comment" rows="3" cols="30"></textarea>
  </div>
  <div>
    <input type="submit" value="送信"> <input type="reset" value="リセット">
  </div>
</form>

form 要素（この例では id 属性が form_sample）に submit() の処理を設定します。

必須項目の「お名前」の値を $("input[name='name']").val() で取得して、値が空でないかを if 文で調べます。

更に、クラス属性が warning の span 要素が存在するかを length を使って調べます。この span 要素は値が空の場合に５行目で追加される要素（エラーメッセージ）で、この要素が存在するということはすでにエラーメッセージが表示されていることになります。

「お名前」が未入力で、エラーメッセージが表示されていなければ、「お名前」の input 要素のボーダーを赤くして、after() を使ってエラーメッセージを追加（表示）し、その文字色を赤にします。

「お名前」が未入力の場合は、return false で送信をキャンセルします。

$("#form_sample").submit(function() {
  if($("input[name='name']").val() == "" ) {
    if($("span.warning").length == 0) {
      $("input[name='name']").css("border", "1px solid red")
        .after("<span class='warning'>お名前を入力してください。</span>");
      $("span.warning").css("color", "red");
    }
    return false;
  } 
});



submitした時の位置を保持

フォームを送信（submit）すると、 action 属性で指定したファイルが読み込まれ、送信した際の画面の表示位置はリセットされページの先頭が表示されます。ページロード後もスクロール位置を変更しないで表示したいことがありますが、その方法については「submitした時の位置を保持」を参照ください。

selected, checked, disabled, multiple 属性の操作

フォーム関連の selected, checked, disabled, multiple, readonly, selectedIndex などの属性を扱う場合は、attr() メソッドではなく、prop() メソッドを使います。

attr() と prop()の違い

  • attr() は HTML の属性（attribute）を扱うためのメソッドです。
  • prop() は JavaScript オブジェクトのプロパティ（property）を扱うためのメソッドです。

フォームとは関係ありませんが、例えば href 属性についてみてみます。

<div>
  <p><a id="prop_attr_1" href="#">To the top</a></p>
  <p class="attr">href 属性の値: <span></span></p>
  <p class="prop">href プロパティの値: <span></span></p>
</div>

以下は、リンクをクリックするとそのリンク（a 要素）の href 属性及びプロパティの値を表示する例です。

$("#prop_attr_1").click(function() {
  var attr = $(this).attr('href');
  var prop = $(this).prop('href');
  $("p.attr span").text(attr);
  $("p.prop span").text(prop);
  return false;
});

以下のサンプルを実行すると、attr('href') で取得する値は、「#」で HTML で記述した href 属性の内容ですが、prop('href') で取得する値は「https://www.webdesignleaves.com/.../xxxx.html#」と異なるのがわかります。

To the top

href 属性の値:

href プロパティの値:

以下はチェックボックスの checked の値を取得して表示するサンプルです。

片方（Wine）のチェックボックスには HTML で checked 属性を指定してあります。

<form id="prop_attr_2" action="" method="post">
  <div>
    <input type="checkbox" name="drink" id="wine" value="wine" checked>Wine  
    <input type="checkbox" name="drink" id="beer" value="beer">Beer 
  </div>
  <div>
    <input type="button" value="表示">
  </div>
  <div>
    <p class="attr_wine">Wine の checked 属性の値: <span></span></p>
    <p class="prop_wine">Wine の checked プロパティの値: <span></span></p>
    <p class="attr_beer">Beer の checked 属性の値: <span></span></p>
    <p class="prop_beer">Beer の checked プロパティの値: <span></span></p>
  </div>
</form>
$("#prop_attr_2 :button").click(function() {
  var attr_wine = $("#wine").attr('checked');
  var prop_wine = $("#wine").prop('checked');
  var attr_beer = $("#beer").attr('checked');
  var prop_beer = $("#beer").prop('checked');
  $("p.attr_wine span").text(attr_wine);
  $("p.prop_wine span").text(prop_wine);
  $("p.attr_beer span").text(attr_beer);
  $("p.prop_beer span").text(prop_beer); 
});

チェックを付けたり外したりしても、checked 属性(attr)の値 は常に同じで、HTML で記述した href 属性の内容が表示されます。

それに対して、プロパティ(prop)の値は、チェックを付けたり外したりすることにより値が変化することが確認できます。

このことからユーザーが選択した状態を取得するには、prop('checked') を使う必要があることがわかります。

input type="checkbox"

Wine の checked 属性(attr)の値:

Wine の checked プロパティ(prop)の値:

Beer の checked 属性(attr)の値:

Beer の checked プロパティ(prop)の値:

全てのチェックボックスにチェックを入れる

以下はボタンをクリックすると、全てのチェックボックスにチェックを入れるサンプルです。

<form action="" method="post">
<fieldset>
  <legend>input type="checkbox"</legend>
  <div>
    <input type="checkbox" name="drink" id="wine" value="wine"><label for="wine"> Wine  </label>  
    <input type="checkbox" name="drink" id="beer" value="beer"><label for="beer"> Beer  </label>  
    <input type="checkbox" name="drink" id="sake" value="sake"><label for="sake"> Sake </label>
    <input type="checkbox" name="drink" id="vodka" value="vodka"><label for="vodka"> Vodka </label>
    <input type="checkbox" name="drink" id="gin" value="gin"><label for="gin"> Gin </label>  
  </div>
</fieldset>
  <div>
    <input type="button" value="全てチェックする"> <input type="reset" value="Reset">
  </div>
</form>

チェックボックスにチェックを入れるには、prop("checked", true) で checked 属性を true にします。このサンプルではボタンの value 属性の値を判定して、チェックボックスにチェックを入れるか、外すかを決めています。チェックボックスを外すには、prop("checked", false) で checked 属性を false します。

attr("checked", "checked") と removeAttr("checked") を使ってもほぼ同様のことができますが、その場合、jQuery で操作したチェックボックスはリセットボタンでは、チェックを外すことができないので注意が必要です。

$(":button").click(function() {
  if($(this).val() == "全てチェックする") {
    $(":checkbox").prop("checked", true);
    //$(":checkbox").attr("checked", "checked");  こちらは NG 
    $(this).val("全てのチェックを外す");
  }else{
    $(":checkbox").prop("checked", false);
    //$(":checkbox").removeAttr("checked");  こちらは NG 
    $(this).val("全てチェックする");
  }  
});
input type="checkbox"

selectedIndex

selectedIndex は、セレクトボックス（select 要素）内の選択肢（option 要素）のうち、選択済み選択肢（option 要素）のインデックス番号を取得、または、設定する JavaScript のプロパティです。

選択肢のインデックス番号は、「0」から始まります。

以下はセレクトボックスの値が変更されたときに、選択された要素を :selected でフィルタして、その value 属性を調べるサンプルです。

<div>
  <label for="age">年齢 </label>
  <select name="age" id="age">
    <option value="10">10代</option>
    <option value="20">20代</option>
    <option value="30">30代</option>
    <option value="40">40代</option>
    <option value="50up">50代以上</option>
  </select> 
</div> 
<div>
  <label for="myDrink">好みのお酒（種類）</label>
  <input type="text" name="myDrink" id="myDrink" value="" size="20"> 
</div>

１行目は prop() と selectedIndex を使って、２つ目の option 要素を選択状態にしています。option 要素に selected 属性を指定しても同じことです。

$(":selected").val() でセレクトボックスで選択されている要素の value 属性の値が取得できるので、その値を比較します。

value 属性の値が「10」の場合は、input 要素の disabled 属性を disabled に変更して、入力できないようにしています。

また、選択された要素のインデックスを prop('selectedIndex') で span 要素に表示しています。

このサンプルの場合は、attr("disabled", "disabled") と removeAttr("disabled") を使っても同じことが可能です。

$("select").prop('selectedIndex', 1);
$("select").change(function() {
  if($(":selected").val() == "10") {
    $("input#myDrink").prop("disabled", true);
    //$("input#myDrink").attr("disabled", "disabled");
  }else{
    $("input#myDrink").prop("disabled", false);
    //$("input#myDrink").removeAttr("disabled");
  }
  $("span.selected_index").text($("select").prop('selectedIndex'));
});

selectedIndex:

文字列のトリミング $.trim()

フォームのデータ検証などで余分な空白をデータから削除したい場合には、$.trim()メソッドを利用できます（JavaScript の String 型には文字列インスタンスの先頭や末尾から空白文字を削除するメソッドがありません）。

$.trim(value)

$.trim() は渡された文字列の先頭や末尾に空白文字があれば削除して、その結果を返します。

パラメータ・戻り値

value
（String）削除すべき文字列の値。元の値は更新されません。
戻り値
先頭や末尾から空白文字が削除された文字列

この関数を使って、テキストフィールドの値をその場でトリミングする例。

$('#someField').val($.trim($('#someField').val()));

以下はボタンをクリックすると空白文字を削除するサンプルと、入力が終了した時点で空白文字を削除するサンプルです。

<form id="trim_sample" action="" method="post">
  <div>
    <label for="name_trim">Name: </label><br>
    <input type="text" name="name_trim" id="name_trim" value="" size="20">
  </div>
  <div>
    <label for="auto_trim">Name (auto trim): </label><br>
    <input type="text" name="auto_trim" id="auto_trim" value="" size="20">
  </div>
  <div>
    <input type="button" value="Trim">
  </div>
</form>    
$(":button").click(function() {
  $('[name="name_trim"]').val($.trim($(' [name="name_trim"]').val()))
});
  
$("[name='auto_trim']").blur(function() {
  $(this).val($.trim($(this).val()));
});


フォームのバリデーション（検証）

バリデーションの方法は大きく分けると post 後に処理する方法と post 前に処理する方法の２つです。

post 後のバリデーションはサーバーに送信された際に、PHP や CGI 等サーバー側で厳密に入力内容をチェックして、エラーがある場合にはエラーメッセージを表示させたりします。

但し、post 後の場合はサーバーとの通信が発生します。サーバーへ送信する前に入力漏れや入力ミスがないかを JavaScript 等でクライアント側であらかじめ簡単な検証を済ませることで、フォームのユーザビリティを高めることができます。

以下のサンプルでは、フォームを dl要素を使ってで記述し、dt 要素には label 要素で「お名前」等の項目名などを、dd 要素に input 要素などのコントロールを配置しています。

各コントロール（input/textarea 要素）にはバリデーションの条件を示す「validate」「required」「number」「mail」などの class 属性を付与しています。

  • validate：検証対象の要素に付与するクラス
  • required：必須項目に付与するクラス
  • number：数値を検証する項目に付与するクラス
  • mail：メールアドレスを検証する項目に付与するクラス
  • mail_check：メールアドレス確認を検証する項目に付与するクラス
  • need_text：その他の項目が選択されている場合に検証するために付与するクラス
<form id="form_validation" action="" method="post">
  <dl>
    <dt><label for="name">お名前（必須）</label></dt>
    <dd><input type="text" name="name" id="name" value="" size="20" class="validate required"></dd>
    <dt><label for="zip1">郵便番号</label></dt>
    <dd><input type="text" name="zip1" id="zip1" size="3" maxlength="3" class="validate number"><input type="text" name="zip2" size="4" maxlength="4" class="form-control validate number"></dd>
    <dt class="clear"><label for="email">メールアドレス </label></dt>
    <dd><input type="text" name="email" id="email" value="" size="20" class="validate mail"></dd>    
    <dt><label for="email_check">メールアドレス（確認） </label></dt>
    <dd><input type="text" name="email_check" id="email_check" value="" size="20" class="validate mail mail_check"></dd>
    <dt><strong>性別（必須）</strong></dt>
    <dd><input type="radio" name="gender" id="male" value="男性" class="validate required"><label for="male"> 男性 </label>  
    <input type="radio" name="gender" id="female" value="女性"><label for="female"> 女性 </label></dd>
    <dt><label for="ages"> 年齢 （必須）</label></dt>
    <dd><select name="ages" id="ages" class="validate required">
        <option value="0" selected>選択してください。</option>
        <option value="10">10代</option>
        <option value="20" >20代</option>
        <option value="30">30代</option>
        <option value="40">40代</option>
        <option value="50">50代</option>
        <option value="60">60代</option>
        <option value="70">70代以上</option>
        </select></dd>
    <dt><strong>どこでこのサイトを知りましたか?（必須）</strong></dt>
    <dd>
      <input type="checkbox" name="how" id="search" value="検索エンジン" class="validate required"> <label for="search">検索エンジン</label>
      <input type="checkbox" name="how" id="friend" value="知人の紹介"> <label for="friend">知人の紹介</label>
      <input type="checkbox" name="how" value="その他" id="other" class="validate need_text"> <label for="other">その他</label>
      <input type="text" name="other_text" value="" placeholder="その他の場合ご記入ください。">
    </dd>
    <dt><label for="inquiry">お問い合わせ内容（必須）</label></dt>
    <dd><textarea name="inquiry" id="inquiry" rows="7" cols="30" placeholder="お問い合わせ内容をご記入ください。" class="validate required"></textarea></dd>
  </dl>
  <div>
    <input type="submit" value="送信"> 
    <input type="reset" value="Reset">
  </div>
</form>

CSS ではコントロールなどの基本スタイルを定義するとともに、以下のようなエラー（入力漏れやメールアドレスの入力ミスなど）用のスタイルを記述しておきます。

エラーの場合は、dd 要素に「error」という class 属性を追加します。

dd p.error はエラーメッセージを表示するテキストのスタイルです。

dd.error input／dd.error textarea/dd.error select／dd.error label は、エラーが発生したコントロールのスタイルで、背景色を設定しています。

チェックボックスやラジオボタンの場合は label 要素にも背景色を設定し、padding で背景色の表示範囲を調整します。

dl dd.error input , 
dd.error textarea , 
dd.error select , 
dd.error label {
    background-color: #F8DFDF;
}
dd p.error{
    margin:0;
    color:red;
    font-weight:bold;
    margin-bottom:1em;
}
dd label{
    padding:5px;
}
性別（必須）
どこでこのサイトを知りましたか?（必須）

検証用のスクリプトは以下のようになります。

$("form#form_validation").submit(function(){
    
  //エラー表示の初期化
  $("p.error").remove();
  $("dl dd").removeClass("error");
  
  //1行テキスト入力フォームとテキストエリアの検証
  $(":text,textarea").filter(".validate").each(function(){
      
    //必須項目の検証
    $(this).filter(".required").each(function(){
      if($(this).val()==""){
        $(this).parent().prepend("<p class='error'>必須項目です</p>")
      }
    })
    
    //数値の検証（郵便番号）
    $(this).filter(".number").each(function(){
      if(isNaN($(this).val())){
        $(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>")
      }
    })
    
    //メールアドレスの検証
    $(this).filter(".mail").each(function(){
      if($(this).val() && !(/.+@.+\..+/g).test($(this).val())){
        $(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>")
      }
    })
    
    //メールアドレス確認の検証
    $(this).filter(".mail_check").each(function(){
      if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){
        $(this).parent().prepend("<p class='error'>メールアドレスが異なります</p>")
      }
    })      
  })
  
  //ラジオボタンの検証
  $(":radio").filter(".validate.required").each(function(){
    if($('input[name="'+$(this).attr("name")+'"]:checked').size() == 0){  
      $(this).parent().prepend("<p class='error'>選択してください</p>")
    }
  })
  
  //セレクトメニューの検証
  $("select").filter(".validate.required").each(function(){
     if($(this).val() == 0 ) {
       $(this).parent().prepend("<p class='error'>選択してください</p>");
     }
  });
  
  //チェックボックスの検証
  $(":checkbox").filter(".validate.required").each(function(){
    if($('input[name="'+$(this).attr("name")+'"]:checked').size() == 0){  
      $(this).parent().prepend("<p class='error'>選択してください</p>")
    }
  })
    
  // その他項目が選択されている場合の検証
  $(".validate.need_text").each(function(){
    if($(this).prop("checked")==true && $("input[name="+$(this).attr("id").replace(/^(.+)$/, "$1_text")+"]").val()==""){
      $(this).parent().prepend("<p class='error'>その他の項目を入力してください。</p>")
    }
  })
  
  //エラーの際のスクロールと error クラスの追加の処理
  if($("p.error").size() > 0){
    $('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow');
    $("p.error").parent().addClass("error");
    return false;
  }
})

このスクリプトは、すべて submit イベント内に記述しています。submit イベントは送信ボタン（type 属性が submit または image の input 要素）がクリックされたときに発生するイベントです。

エラー表示の初期化処理

送信ボタンが初めてクリックされた場合以外では、すでにバリデーション処理が実行されていて、バリデーションエラー時の処理が適用されています。その場合、エラーメッセージが何度も表示されたり、修正済みの項目のエラーメッセージが消えない等問題があるので、最初に表示を初期化しておきます。removeClass()で「error」という class 属性を削除し、remove() でエラーメッセージを表示する p 要素を削除しています。

//エラー表示の初期化
$("p.error").remove();
$("dl dd").removeClass("error");

テキスト入力フォームの検証

:text は type 属性の値が「text」の input 要素を選択するセレクターで、:text と textarea をグループセレクターで取得し、filter() を使ってさらに絞り込みます。

filter() はすでにセレクターで絞った要素に対して、さらに別の条件での絞り込みができます。以下のように each() と組み合わせると、class 属性に「validate」が付いたテキスト入力フォームに対して、バリデーション処理を設定することができます。

 $(":text,textarea").filter(".validate").each(function(){
  //テキスト入力フォームの検証
});

必須項目の検証

$(this) に対して、class 属性に「required」と付いている要素を入力必須項目として filter で絞り込み、if文でテキストが空の場合のみエラーメッセージを表示します。入力フォームの入力内容は val() で取得できます。

ここでの最初の $(this) は、class 属性に「validate」が付いたテキスト入力フォームです。２番目の $(this) は、class 属性に「required」が付いたテキスト入力フォームになります。

また、エラーメッセージはエラーが発生した入力フォームのすぐ上に表示するように、チェックした input 要素の親要素（ dd 要素）を parent() で取得して、prepend() で dd 要素の先頭にエラーメッセージを挿入します。

$(this).filter(".required").each(function(){
  if($(this).val()==""){
    $(this).parent().prepend("<p class='error'>必須項目です</p>")
  }
})

数値の検証

class 属性が「number」の要素には、入力された値が数値かどうかをチェックします。数値のチェックには、isNaN() という JavaScript の命令を使います。isNaN() を if 文の条件に設定すると、値が数値ではない場合に true になり、続くブロック内の命令を実行します。

//数値の検証（郵便番号）
$(this).filter(".number").each(function(){
  if(isNaN($(this).val())){
    $(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>")
  }
})

メールアドレスの検証

class 属性が「mail」の要素は、入力されているテキストがメールアドレスかどうかを検証します。

必須項目ではないので、$(this).val() で、値が入力されている場合にという条件を指定しています。

メールアドレスの検証は正規表現を使って行いますが、ここでは一般的なメールアドレスの書式に合致するかだけを簡易的に調べています。

指定したパターンとテキストが一致しているかを調べるには、test() を使います。

正規表現のパターンに「/.+@.+\..+/g」を指定して、test()を使うと「@ を含み、その後に.(ドット)が含まれている」場合に true が返されます。

$(this).val().test(...) の前に ! を付けると条件が反転して、指定したパターンにマッチしない場合に、if(){...} 内の命令が実行されることになります。

//メールアドレスの検証
$(this).filter(".mail").each(function(){
  if($(this).val() && !(/.+@.+\..+/g).test($(this).val())){
    $(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>")
  }
})

メールアドレス確認の検証

class 属性が「mail_check」の要素に対しては、前に入力したメールアドレス欄と内容が一致しているか検証します。

対象のコントロールは、name 属性の値を使って指定します。「メールアドレス確認」の入力フォームの name 属性の値を取得し、取得した値から「_check」を取り除いた name 属性（この場合は mail）を持つ要素が対象のコントロールです。

name 属性から _check を取り除くのは replace() を利用します。

//メールアドレス確認の検証
$(this).filter(".mail_check").each(function(){
  if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){
    $(this).parent().prepend("<p class='error'>メールアドレスが異なります</p>")
  }
})      
})

ラジオボタンの検証

ラジオボタンの検証は、class 属性に「validate」と「required」の両方が設定されている要素を対象にします。同じ name 属性（ここでは「gender」)が設定されているラジオボタンのうち、チェックの入っているボタンが1つ以上存在するかを調べます。

チェックの入っているボタンは、:checked で特定できます。

合致する要素の数は size() を使って調べられます。size() で調べた結果、チェックの入っているボタンの数が 0 の場合に、エラーメッセージを表示します。

//ラジオボタンの検証
$(":radio").filter(".validate.required").each(function(){
  if($('input[name="'+$(this).attr("name")+'"]:checked').size() == 0){  
    $(this).parent().prepend("<p class='error'>選択してください</p>")
  }
})

ラジオボタンは、同じ name 属性の input 要素のどれか１つに class 属性「validate」「required」を設定しておきます。

<dd><input type="radio" name="gender" id="male" value="男性" class="validate required"><label for="male"> 男性 </label>  
<input type="radio" name="gender" id="female" value="女性"><label for="female"> 女性 </label></dd>

セレクトメニューの検証

セレクトメニューの検証は、class 属性に「validate」と「required」の両方が設定されている要素を対象にします。取得した値が「0」の場合は、ユーザーがまだメニューから選択していないので、エラーメッセージを表示します。

$("select").filter(".validate.required").each(function(){
   if($(this).val() == 0 ) {
     $(this).parent().prepend("<p class='error'>選択してください</p>");
   }
});

チェックボックスの検証

ラジオボタンと同様に、同じ name 属性の input 要素のどれか１つに class 属性「validate」「required」を設定しておき、検証の対象とします。

<input type="checkbox" name="how" id="search" value="検索エンジン" class="validate required"> <label for="search">検索エンジン</label>
<input type="checkbox" name="how" id="friend" value="知人の紹介"> <label for="friend">知人の紹介</label>
<input type="checkbox" name="how" value="その他" id="other" class="validate need_text"> <label for="other">その他</label>

チェックボックスの検証もラジオボタンと同様に、class 属性に「validate」と「required」の両方が設定されている要素を対象にします。

同じ name 属性（ここでは「how」)が設定されているチェックボックスのうち、チェックの入っているチェックボックスが1つ以上存在するかを調べます。

チェックの入っているチェックボックスは、:checked で特定できます。

合致する要素の数は size() を使って調べられます。size() で調べた結果、チェックの入っているチェックボックスの数が 0 の場合に、エラーメッセージを表示します。

//チェックボックスの検証
$(":checkbox").filter(".validate.required").each(function(){
  if($('input[name="'+$(this).attr("name")+'"]:checked').size() == 0){  
    $(this).parent().prepend("<p class='error'>選択してください</p>")
  }
})

その他項目が選択されている場合の検証

チェックボックスの「その他」にチェックが入っている場合には、その後の1行テキスト入力フォームにテキストが入力されているかどうかを調べます。

まず、class 属性が「validate」と「need_text」のチェックボックス要素を対象にします。

対象の要素にチェックが入っているかは、prop("checked") で調べます。

対象の要素の id 属性を利用して、_text で終わる name 属性のテキスト入力フォームの値を調べて、値が空の場合に、エラーメッセージを表示します。

このサンプルの場合は、「validate」と「need_text」が設定されているチェックボックスの id 属性は「other」なので、name 属性が「other_text」の1行テキスト入力フォームが対象になります。

 <input type="checkbox" name="how" value="その他" id="other" class="validate need_text"> <label for="other">その他</label>
<input type="text" name="other_text" value="" placeholder="その他の場合ご記入ください。">
// その他項目が選択されている場合の検証
$(".validate.need_text").each(function(){
  if($(this).prop("checked")==true && $("input[name="+$(this).attr("id").replace(/^(.+)$/, "$1_text")+"]").val()==""){
    $(this).parent().prepend("<p class='error'>その他の項目を入力してください。</p>")
  }
})

エラー時の処理

最後にエラーがあった場合に実行する処理を設定します。

エラーがあった場合、<p class='error'>エラー内容</p>という HTML が追加されているので、$("p.error").size()で、エラー内容が追加されているかをチェックします。

エラーがあった場合、animate() を使って、最初にエラーがあったコントロールにアニメーションで移動（スクロール）します。

セレクターに html, body を指定して、animate() で scrollTop を変更すると、スクロールアニメーションによるページ内移動ができます。

最初にエラーが出現した要素(p.error:first)よりも少し上（-40）辺りを設定すると、項目名が確認できる位置に移動します。

また、エラーが発生している要素の親要素には addClass() で class 属性「error」を追加します。最後に return false; を設定して、フォームの送信処理を中止します。

//エラーの際のスクロールと error クラスの追加の処理
if($("p.error").size() > 0){
  $('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow');
  $("p.error").parent().addClass("error");
  return false;
}

参考：http://ascii.jp/elem/000/000/479/479507/