ラボ > 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(〇〇〇)