ラボ > Javascript関連：ajax、form

ajaxとform投稿

作成日:2018-08-30, 更新日:2022-02-08

基本

・JS側のバリデーションチェックは、最小限にしておく（サーバ側で最終チェックを行う）

確認画面無し：form入力→バリデーション→エラー表示 or 送信

・確認画面無し
・バリデーションでエラーがあればそのままエラー表示

HTML部

<style>
  /** バリデーションエラー：ひとまず非表示にしておく **/
  .errValid {
    display: none;
  }
</style>

<form id="FormのID" action="〇〇〇" method="〇〇〇">
  <input type="text" name="〇〇〇" /><p class="errValid title"></p>
  <input type="text" name="〇〇〇" /><p class="errValid contents"></p>
  
  <button id="btnSave" type="button">保存</button>
</form>

JS部

var idForm = '#FormのID';

//// 値を変更してから送信
//var save = function() {
//  var tagForm = $('<form></form>');
//  
//  tagForm.attr({
//    'action':   $(idForm).attr('action'),
//    'method':   $(idForm).attr('method'),
//    'encoding': 'application/x-www-form-urlencoded',
//  });
//  
//  var formAry = $(idForm).serializeArray();
//  
//  $.each(formAry, function(i, field){
//    // tagForm.append()で値を追加・削除・変更をおこなう
//    tagForm.append('<input type="text" name="'+field['name']+'" value="'+field['value']+'" />');
//  });
//  
//  tagForm.attr({
//    'style': 'overflow:hidden;width:0;height:0;'
//  });
//  $('body').append(tagForm);
//  
//  tagForm.submit();
//}

// バリデーションのエラーを出力
var chkValid = function(validation) {
  // 「validation」は連想配列で、「p class=errValid」のもう一つのクラス名をキーにする
  //
  // ▼上記のHTMLの場合は下記のような感じの配列にする
  // ・validation['title'] = エラーメッセージ
  // ・validation['contents'] = エラーメッセージ
  
  var noErr = true;
  for ( var key in validation ) {
    if ( 0 < $('.'+key).length ) {
      $('.'+key).html(validation[key]).css('display', 'block');
      noErr = false;
    }
  }
  
  return noErr;
}

$(idForm).on('click', '#btnSave', function(){
  
  // ひとまずエラーを非表示
  $('.errValid').html('').css('display', 'none');
  
  // ajax用にformデータの整形
  var formAry = $(idForm).serializeArray();
  var fd = new FormData();
  $.each(formAry, function(i, field){
    fd.append(field['name'], field['value']);
  });
  
  // ファイルは別に追加処理が必要
  fd.append( '〇〇〇', $('[name="〇〇〇"]').prop("files")[0] );
  
  $.ajax({
    url: 'バリデーションチェックさせるURL',
    data: fd
  }).done(function(data) {
    if ( chkValid(バリデーションエラーを格納した配列) ) {
      // エラーがなかったので、そのまま送信
      $(idForm).submit();
      //save(); // 何か値を変更して送信
    }
    else {
      // バリデーションエラーがあったので何もしない
    }
  }).fail(function(jqXHR, textStatus, errorThrown) {
    var codeJqXHR = parseFloat(jqXHR.status);
    var errMes = '';
    if(codeJqXHR == 0 || jqXHR.status == 404 || errorThrown == 'Not Found') {
       errMes = 'There was a 404 error.';
    }
    else {
       errMes = 'XMLHttpRequest : ' + jqXHR.status + "\n"
              + 'textStatus : '     + textStatus   + "\n"
              + 'errorThrown : '    + errorThrown  + "\n";
    }
    console.log(errMes);
  });
});

バリデーション後、一部だけ変更してform送信

基本「save()」の中身をゴニョゴニョすればいいんだけど、ほんの一部だけ変更するのに「save()」を用意するのが面倒なときとか。

▼「$(idForm).submit();」の前に下記のような感じで対応

$(idForm).('[name="〇〇〇"]').val(〇〇〇)

関連項目