했던 일

jQuery를 사용하여 다음과 같은 흐름을 만들었습니다.

BootStrap 모달 대화 상자 (form 입력 화면)를 엽니 다

사용자에 의한 form 입력

validate 처리

validate가 OK이면 Ajax에서 POST 요청 보내기

응답 결과를 경고로 표시

내용 상세

BootStrap 모달 대화상자

위의 이미지와 같은 대화 상자를 만듭니다.

출처

길기 때문에 form 부분은 생략하고 있습니다.

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="my![20160924191256.png](https://qiita-image-store.s3.amazonaws.com/0/109149/ab030a9c-96b3-473a-c56a-7b5d0fe1ad67.png)
LargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- モーダルのヘッダ -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modal-label">ダイアログ</h4>
            </div>
            <!-- モーダルのボディ -->
            <div class="modal-body">

            <form id="addHotel">
              :
            </form>

            </div>
            <!-- モーダルのフッタ -->
            <div class="modal-footer">
                <div id="response_parameter" ></div>
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                <button type="button" id="addBtn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
:
<!-- モーダル開くボタン -->
<button class="btn btn-warning" data-toggle="modal" data-target=".bd-example-modal-lg">Add Hotel</button>

Validate 과 Ajax

위의 이미지와 같은 Validate 처리를 jQuery Validation Plugin을 사용하여 구현했습니다.

출처

//カスタムvalidateの作成
//ここでは英大文字のみを正規表現で判定
jQuery.validator.addMethod("uppercase", function(value, element) {
    return this.optional(element) || /^[A-Z]+$/.test(value);
}, "Please input uppercase");

//validateのoption作成
var hotelValid = {
    //入力欄別にルールを作成
    rules:{
        name:{
            required:true
        },
        address:{
            required:true
        },
        countryCode:{
            required:true,
            minlength:2,
            uppercase:true
        },
        cityCode:{
            required:true,
            minlength:3,
            uppercase:true
        },
        grade:{
            required:true
        },
        facility:{
            required:true
        },
        imagePath:{
            required:true,
            url:true
        },
    },
    //messageを自分好みに設定
    messages:{
        countryCode:{
            minlength:"Country code must be 2 characters."
        },
        cityCode:{
            minlength:"City code must be 3 characters."
        }
    }
}

$(function(){
    //ボタンクリックで発火
    $("#addBtn").click(function(){
        //validate実行（作成したvalidateのoptionを指定）
        $("#addHotel").validate(hotelValid);
        //失敗で戻る
        if (!$("#addHotel").valid()) {
            return false;
        };
        //Ajaxでform入力内容送信
        $.ajax( {
            type: "POST",
            url: "/hotel/add",
            dataType: "json",
            data: {
                "name" : $('#name').val(),
                "address" : $('#address').val(),
                "countryCode" : $('#countryCode').val(),
                "cityCode" : $('#cityCode').val(),
                "grade" : $('#grade').val(),
                "facility" : $('#facility').val(),
                "imagePath" : $('#imagePath').val()
            }
        //成功で作成したホテルIdをアラートで表示
        }).done(function( response ){
            alert( "Hotel Id = " + response.data.hotel.id + " added." );
        //失敗もアラートで通知
        }).fail(function( data ){
            alert( "faild" );
        });
    });
})

간단한 댓글을 추가했습니다.
Ajax에서 아래와 같이 success : 와 같은 쓰기를 하면 비동기 처리 때문에 response.data.hotel.id 의 부분을 얻을 수 없습니다.

$.ajax({
    url: "ajax.html",
    success: function(data) {
       alert('success!!');
    },
    error: function(data) {
       alert('error!!!');
    }
});

callback으로 잘 처리의 순서를 제어할 수 있다고 하지만, jQuery1.8 이상에서는 이용자의 의도에 따른 처리를 done/fail로 실시할 수 있으므로 편리하네요.

편리하다고 생각하면서, 이대로 진행하면 callback의 사용법을 제대로 공부하지 않고 진행해 버릴 것 같기 때문에 제대로 구조도 이해해 가고 싶습니다.