ajaxでフォーム送信をするサンプルコード[HTML/jQuery]

初めてajaxを使ったフォーム送信のコードを書いたのでメモ。
（今まではコピペラミングでした。自分で書くのとコードを眺めるとのでは大違いですね・・・）

フォーム部分のHTMLと、submit後の処理のjQueryのサンプルコード
項目は「名前」と「コメント」のみ
submit後にバリデーションを行い、OKであればajax通信を行う。NGの場合エラーメッセージを表示する。

という基本的なコードのみなので、項目を足したり、バリデーションのルールを追加したり、カスタマイズしてください。

フォームのHTML部分
JS部分（フォームバリデーションとajax通信）
今回の反省点

フォームのHTML部分

<form id='sample_form' action="javascript:void(0)">
<p>名前</p>
<input name="name" type="text">
<div id="name_err"></div>
<p>コメント</p>
<textarea name="comment"></textarea>
<div id="comment_err"></div>
<div id="send_err"></div>
<button id="submit">コメントを送信する</button>
</form>

JS部分（フォームバリデーションとajax通信）

$('#submit').click(function(e){
var name = $('[name=name]').val();
var comment = $('[name=comment]').val();
var postData = {};
postData["name"] = name;
postData["comment"] = comment;

if(validateData(postData) === false){
  $.ajax({
    url: 'http://www.wegirls.tech/ajax/post/sample',
    type: "POST",
    dataType : "json",
    data: postData,
    timeout: 30000,
    beforeSend: function(xhr, settings) {
      //送信前の処理：ボタンを非活性化して、二重送信を防ぐ
      $('#submit').attr('disabled', true);
    },
    complete: function(xhr, textStatus) {
      //ajax通信が完了したら、ボタンの非活性化を解除する
      $('#submit').attr('disabled', false);
    },
    success: function(result, textStatus, xhr) {
      //ajax通信が成功したときの処理
      //PHP側で、エラーであれば0、成功であれば1を返すようにしてあると仮定
      if(result['code'] == 0){
        $('#send_err').text('コメントを送信できませんでした');
      }else{
        $("#sample_form")[0].reset();
        alert('コメントを送信しました。');
      }
    },
    error: function(xhr, textStatus, error) {
      //ajax通信が失敗した時の処理
      $('#send_err').text('コメントを送信できませんでした');
    }
  });
}

  function validateData(postData){
    //エラーがないときはerr_flgはfalseとする
    var errFlg = false;

    //複数回エラーになったときのためにリセットしておく
    $('#name_err').text('');
    $('#comment_err').text('');

    //名前のバリデーション
    if(postData['name'].length > 10){
      $('#name_err').text('名前は10文字以内で入力してください。');
      errFlg = true;
    }

    //コメントのバリデーション
    if(postData['comment'].length > 100){
      $('#comment_err').text('コメントは100文字以内で入力してください。');
      errFlg = true;
    }

    return errFlg;
  }
});