제이쿼리

저장 버튼 누르면

조사 대상인 form의 name , id의 값이 frmWrite다.

 

<form name="frmWrite" id="frmWrite" action="./board_ps.php" method="post" enctype="multipart/form-data" class="frmWrite"
    novalidate="novalidate">
    <input type="hidden" name="bdId" value="arevent">
    <input type="hidden" name="sno" value="">
    <input type="hidden" name="mode" value="write">
    <!--<input type="hidden" name="chkSpamKey" id="chkSpamKey">-->
    <input type="hidden" name="returnUrl" value="bdId=arevent">

    <div class="board_zone_write">
        <div class="board_write_box">
            <table class="board_write_table">
                <colgroup>
                    <col style="width:15%">
                    <col style="width:85%">
                </colgroup>
                <tbody>
                    <tr>
                        <th scope="row">작성자</th>
                        <td>
                            <input type="text" class="text valid" name="writerNm" value="" aria-required="true">
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">비밀번호</th>
                        <td><input type="password" class="text error" name="writerPw" aria-required="true"></td>
                    </tr>
                    <tr>
                        <th scope="row">상품 선택</th>
                        <td>
                            <div class="board_goods_select">
                                <span class="js_selected_info_text">선택된 상품이 없습니다.</span>
                                <a href="#addGoodsLayer" title="찾아보기" class="btn_goods_select btn_open_layer"> 상품 선택
                                </a>
                                <div id="selectGoodsBox">
                                </div>
                                <!-- //goods_select_item -->
                            </div>
                            <!-- //board_goods_select -->
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">평가</th>
                        <td>
                            <div class="form_element">
                                <ul class="rating_star_list">
                                    <li>
                                        <label for="rating5" class="choice_s ">
                                            <span class="rating_star">
                                                <span style="width:100%;">별5</span>
                                            </span>
                                        </label>
                                        <input type="radio" name="goodsPt" value="5" id="rating5" aria-required="true"
                                            class="error">
                                    </li>
                                    <li>
                                        <label for="rating4" class="choice_s ">
                                            <span class="rating_star">
                                                <span style="width:80%;">별4</span>
                                            </span>
                                        </label>
                                        <input type="radio" name="goodsPt" value="4" id="rating4" class="error">
                                    </li>
                                    <li>
                                        <label for="rating3" class="choice_s ">
                                            <span class="rating_star">
                                                <span style="width:60%;">별3</span>
                                            </span>
                                        </label>
                                        <input type="radio" name="goodsPt" value="3" id="rating3" class="error">
                                    </li>
                                    <li>
                                        <label for="rating2" class="choice_s ">
                                            <span class="rating_star">
                                                <span style="width:40%;">별2</span>
                                            </span>
                                        </label>
                                        <input type="radio" name="goodsPt" value="2" id="rating2" class="error">
                                    </li>
                                    <li>
                                        <label for="rating1" class="choice_s ">
                                            <span class="rating_star">
                                                <span style="width:20%;">별1</span>
                                            </span>
                                        </label>
                                        <input type="radio" name="goodsPt" value="1" id="rating1" class="error">
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">휴대폰</th>
                        <td><input type="text" id="time" class="write_title" name="writerMobile" value=""
                                placeholder="- -없이 입력하세요" autocomplete="off"></td>
                    </tr>
                    <tr>
                        <th scope="row">제목
                        </th>
                        <td><input type="text" name="subject" value="" aria-required="true" class="error"></td>
                    </tr>
                    <tr>
                        <th scope="row">본문</th>
                        <td class="write_editor">
                            <div class="form_element">
                            </div>
                            <textarea id="editor" name="contents" class="edit98 valid"
                                style="display: none;">&lt;p&gt;&lt;span style="color: rgb(154, 154, 154); font-size: 12pt;"&gt;※하단 첨부파일로 이미지 업로드 해주세요.&lt;/span&gt;&amp;nbsp;&lt;/p&gt;</textarea><iframe
                                frameborder="0" scrolling="no" style="width: 100%; height: 385px;"
                                src="/data/skin/front/rvskin_C/js/smart/SmartEditor2Skin.html"></iframe>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">첨부파일</th>
                        <td id="uploadBox">


                            <div class="file_upload_sec">
                                <label for="attach1">
                                    <input type="text" class="file_text" title="파일 첨부하기" readonly="readonly">
                                </label>
                                <div class="btn_upload_box">
                                    <button type="button" class="btn_upload" title="찾아보기"><em>찾아보기</em></button>
                                    <input type="file" id="attach1" name="upfiles[]" class="file" title="찾아보기">
                                    <span class="btn_gray_list"><button type="button" id="addUploadBtn"
                                            class="btn_gray_big"><span>+ 추가</span></button></span>
                                </div>
                            </div>

                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- //board_write_box -->
        <div class="board_write_agree">
            <div class="board_commen_agree">
                <div class="form_element">
                    <h5>비회원 개인정보 수집동의</h5>
                    <textarea cols="30" rows="5">- 수집항목: 이름, 전화번호, 이메일주소
- 수집/이용목적: 게시글 접수 및 결과 회신
- 이용기간: 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 
               단, 관계법령의 규정에 의하여 보전할 필요가 있는 경우 일정기간 동안 개인정보를 보관할 수 있습니다.</textarea>
                    <div class="agree_choice_box">
                        <input type="checkbox" name="private" value="y" id="acceptTerms" aria-required="true"
                            class="error">
                        <label for="acceptTerms" class="check_s">비회원 글작성에 대한 개인정보 수집 및 이용동의</label>
                        <a href="../service/private.php" class="link_agree_go" target="_blank">전체보기 &gt;</a>
                    </div>
                </div>
            </div>
            <!-- //board_commen_agree -->
        </div>
        <!-- //board_write_agree -->

    </div>
    <!-- //board_zone_write -->

    <div class="btn_center_box">
        <button type="button" class="btn_before" onclick="javascript:history.back()"><strong>이전</strong></button>
        <button type="submit" class="btn_write_ok"><strong>저장</strong></button>
    </div>

</form>

 

 

참조: https://goodteacher.tistory.com/162

$("#frmWrite").validate({

vailate 는 제이쿼리에서 submit 하기전에 유효성을 검사해준다.

rules

검사할 항목을 rules: {    } 안에 넣어두고

꼭 검사할 대상의 name: required 로 표시한다.

(주의) 요소의 id가 아니다, name 이다

  ex)    private: 'required',

 

messages 

검사할 대상의 값이 비워져 있으면

messages : {    } 안에 있는

검사할 대상의 name의 값을 alert로 내보낸다.

 

  ex) messages: {
            writerNm: {
                required: __('작성자를 입력해주세요.')
            }, 등등등 나열

       }

    $("#frmWrite").validate({
        submitHandler: function (form) {
            if (boardSuubmitFl === false) {
                alert(__('처리중입니다. 잠시만 기다려주세요.'));
                return false;
            }
            if($(form).find('[name="uploadType"]').val() == 'ajax') {
                $('input:file').prop('disabled', true);
            }
            if (cfgEditorFl == 'y') {
                oEditors.getById["editor"].exec("UPDATE_CONTENTS_FIELD", []);	// 에디터의 내용이 textarea에 적용됩니다.
            }
            form.submit();
            boardSuubmitFl = false;
        },
        rules: {
            private: 'required',
            contents: {
                required: function (textarea) {
                    if (cfgEditorFl == 'y') {
                        var editorcontent = oEditors.getById[textarea.id].getIR();	// 에디터의 내용 가져오기.
                        editorcontent = editorcontent.replace(/<(?!img).*?>/ig, '').replace('&nbsp;', '');  //이미지테그제외한 테그제거
                        return editorcontent.length === 0;
                    }
                    else {
                        return textarea.value.length === 0;
                    }
                }
            },
            writerNm: 'required',
            writerPw: 'required',
            subject: 'required',
            captchaKey: {
                required: true,
                checkCaptcha : true,
            },
            goodsPt: 'required',
            writerEmail: {
                required: true,
                email: true
            },
        },
        messages: {
            writerNm: {
                required: __('작성자를 입력해주세요.')
            },
            writerPw: {
                required: __('비밀번호를 입력해주세요.')
            },
            subject: {
                required: __('제목을 입력해주세요.')
            },
            contents: {
                required: __('내용을 입력해주세요')
            },
            private: {
                required: __('개인정보 수집 및 이용동의를 체크해주세요.')
            },
            captchaKey: {
                required: __('자동등록방지 문자를 입력해주세요.'),
            },
            goodsPt: {
                required: __('평가를 체크해주세요.')
            },
            writerEmail: {
                required: __('이메일을 입력해주세요.'),
                email: __('메일 형식이 틀렸습니다.')
            }

        }
    });

 

 

 

submitHandler 가 뭐지

유효성 검사를 통과하면 전송한다.
form을 submit 하지 않고 , ajax로 처리하고자 할 경우 작성한다.
단순히 form전송을 하는 경우는 작성할 필요가 없다.

submitHandler: function (form) {
            if (boardSuubmitFl === false) {
                alert(__('처리중입니다. 잠시만 기다려주세요.'));
                return false;
            }
            if($(form).find('[name="uploadType"]').val() == 'ajax') {
                $('input:file').prop('disabled', true);
            }
            if (cfgEditorFl == 'y') {
                oEditors.getById["editor"].exec("UPDATE_CONTENTS_FIELD", []);	// 에디터의 내용이 textarea에 적용됩니다.
            }
            form.submit();
            boardSuubmitFl = false;
        }

 

 

 

 

 

 

 

 

 

 

 

 

 

<div class="btn_upload_box">
	<button type="button" class="btn_upload" title="찾아보기"><em>찾아보기</em></button>
	<input type="file" id="attach1" name="upfiles[]" class="file" title="찾아보기">
	<span class="btn_gray_list"><button type="button" id="addUploadBtn" class="btn_gray_big"><span>+ 추가</span></button></span>
</div>

 

 

    $(document).on("change", "input:file", function () {
        var thisObj = $(this);
        var name = this.name;
        var idx = $('input[name="' + name + '"]').index(this);
        //ajax업로드 처리
        var uploadImages = [];
        gdAjaxUpload.upload(
            {
                formObj: $("#frmWrite"),
                thisObj: $(this),
                actionUrl: '../board/board_ps.php',
                params: {bdId: $('[name="bdId"]').val(), 'mode': 'ajaxUpload'},
                onbeforeunload: function () {
                    if (uploadImages.length == 0) {
                        return false;
                    }
                    $.ajax({
                        method: "POST",
                        url: "../board/board_ps.php",
                        data: {mode: 'deleteGarbageImage', bdId: $('[name="bdId"]').val(), deleteImage: uploadImages.join('^|^')},
                        cache: false,
                    }).success(function (data) {
                    }).error(function (e) {
                    });
                },
                successAfter: function (data) {
                    thisObj.attr('index',data.index);
                    uploadImages.push(data.saveFileNm);
                },
                failAfter : function(data) {
                    if (data.result == 'fail' && name == 'upfiles[]') {
                        $('input[name="' + name + '"]').eq(idx).val('');
                    }
                }
            }
        )
    });

 

/**
 * 파일 업로드 객체
 */
var gdAjaxUpload = {
    upload : function(data) {
        var formData = new FormData();
        for (var k in data.params){
            if (data.params.hasOwnProperty(k)) {
                formData.append(k, data.params[k]);
            }
        }
        if(data.onbeforeunload){
            window.onbeforeunload = data.onbeforeunload;
            data.formObj.on("submit", function () {
                window.onbeforeunload = null;
            });
        }

        if(data.formObj.find('[name=uploadType][value=ajax]').length < 1) {
            data.formObj.append('<input type="hidden"  name="uploadType" value="ajax" >');
        }
        var index = data.thisObj.closest('form').find('input:file').index(data.thisObj);
        formData.append('uploadFile', data.thisObj[0].files[0]);

        $.ajax({
            url: data.actionUrl,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (returnData) {
                returnData['index'] = index;
                if(returnData.result == 'ok') {
                    if ($('input[name="uploadFileNm[' + index + ']"]').length == 0) {
                        data.formObj.append("<input type='hidden' name='uploadFileNm[" + index + "]' value='" + returnData.uploadFileNm + "'>");
                        data.formObj.append("<input type='hidden' name='saveFileNm[" + index + "]' value='" + returnData.saveFileNm + "'>");
                    }
                    else {
                        $("input[name='uploadFileNm[" + index + "]']").val(returnData.uploadFileNm);
                        $("input[name='saveFileNm[" + index + "]']").val(returnData.saveFileNm);
                    }
                    if(typeof data.successAfter == 'function') {
                        data.successAfter(returnData);
                    }
                }
                else if(returnData.result == 'cancel'){
                    if ($("input[name='uploadFileNm[" + index + "]']").length > 0) {
                        $("input[name='uploadFileNm[" + index + "]']").remove();
                        $("input[name='saveFileNm[" + index + "]']").remove();
                    }
                }
                else {
                    gdAjaxUpload.isSuccess = false;
                    $('label[for=attach' + (index + 1) + '] .text').val('');  //파일시스템 텍스트 빈값 처리
                    alert(returnData.errorMsg);
                    if(typeof data.failAfter == 'function') {
                        data.failAfter(returnData);
                    }
                }
            }
        });
    }
};

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

$(document).on('click', '.btn_alert_login', function (e) {
        var target = $(this).attr('id');
        e.preventDefault();
        alert(__('로그인하셔야 본 서비스를 이용하실 수 있습니다.'));
        document.location.href = target == undefined ?  "../member/login.php" : "../member/login.php?id=" + target;
        return false;
    });

 

 

 

// 체크박스 처리 로직 초기화
function gd_init_checkbox_ui() {
    $(document).on('click', 'input[type=radio]', function(e){
        $(this).parents('form:first').find("input[name='" + $(this).prop("name") + "']").each(function() {
            if ($(this).prop("checked")) {
                $("label[for=" + $(this).attr("id") + "]").addClass("on");
            } else {
                $("label[for=" + $(this).attr("id") + "]").removeClass("on");
            }
        });
    });

    $(document).on('click', 'input[type=checkbox]', function(e){
        if($(this).prop('readonly') === false) {
            if($(this).prop("checked")) {
                $("label[for="+$(this).attr("id")+"]").addClass("on");
            } else {
                $("label[for="+$(this).attr("id")+"]").removeClass("on");
            }
        } else {
            e.preventDefault();
        }
    });
}

<label for="rating5" class="choice_s ">
 <span class="rating_star">
 <span style="width:100%;">별5</span>
 </span>
</label>

 

 

 

// 레이어 박스 이벤트
function gd_center_layer(){
    //$('.btn_open_layer').off('click');
    $(document).on('click', '.btn_open_layer', function() {
        // @qnibus 레이어 안에 레이어가 있는 경우 종속된 보이지 않는 레이어가 이미 떠있는 레이어 기준으로 center 처리 되어 보여져 레이아웃이 깨짐
		/*엠플샵 추가*//*if($( window ).width() < 860){if($(this).parent('.img_photo_big').length > 0){return false;}}*/
        $('.layer_wrap').removeAttr('style');
        $('body').css('overflow','hidden');
        var target = $(this).attr('href');
        $(target).removeClass('dn').fadeOut(0).fadeIn(300);
		$('#layerDim').removeClass('dn').fadeOut(0).fadeIn(300);
        if($(this).parent('.img_photo_big').length > 0){}else{$(target).find('> div').center();}

        return false;
    });

    $(document).on('click', '.layer_wrap .layer_close, .btn_box .btn_cancel', function(){
        $(this).closest('.layer_wrap').addClass('dn');
        // 창이 2개 이상 떠있는 경우 Dim처리 안되게
        if (!$('.layer_wrap').is(':visible')) {
            $('#layerDim').addClass('dn');
            $('body').removeAttr('style');
        }
        return false;
    });
}