하은양 믿음군 효실맘 호홍홍집s

ajax Form plugin과 validate 처리 본문

가벼운 배움/JQuery

ajax Form plugin과 validate 처리

호홍홍집 2015. 11. 5. 10:10
// 시설이미지 파일추가 버튼 클릭
참고 : http://stackoverflow.com/questions/1566257/jquery-validation-form-plugin
jquery form plugin : http://malsup.com/jquery/form/

submit시에 validate 적용하기 예제 ...^^

$(document).ready(function(){
var v_frmAfter = $('#frmAfter');
    var v_af_prc = $('#af_prc');
    var v_btnAfterWrite = $('#btnAfterWrite');
    v_btnAfterWrite.click(function(event){
        if(!v_af_prc.val()) v_af_prc.val('afterWrite');
        v_frmAfter.ajaxSubmit({
            beforeSubmit:  validate,
            success: processJson,
            dataType: 'json'
        });
        event.preventDefault();
    });

    v_frmAfter.validate({
        debug: false,
        onfocusout: false,
        rules : {
	       ba_sdate : {required : true, minlength : 8, maxlength : 8, digits: true},
		    ba_proposal : {required : true},
			ba_edate : {minlength : 8, maxlength : 8, digits: true}
        },
        messages : {
            ba_sdate : {required : '날짜를 입력하세요', minlength : '날짜 형식은 YYYYMMDD 8자입니다.', maxlength : '날짜 형식은 YYYYMMDD 8자입니다.', digits: '숫자만 입력하세요'},
            ba_proposal : {required : '건의사항을 입력하세요'},
            ba_edate : {minlength : '날짜 형식은 YYYYMMDD 8자입니다.', maxlength : '날짜 형식은 YYYYMMDD 8자입니다.', digits: '숫자만 입력하세요'}
        },
        // errorElement: "div",
        errorPlacement: function(error, element) {
            // error.insertAfter(element);
            // error.css({"margin":"0 0 0 0px", "color":"red"});
        },
        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                alert(validator.errorList[0].message);
                validator.errorList[0].element.focus();
            }
        }
    });
});

function processJson(data){
    alert(data.datachk);
    alert(data.message);
}

function validate(formData, jqForm, options) {
    return $('#frmAfter').valid();
}

///////  또다른 success 처리...
var v_addFile = $('#addFile');
v_addFile.click(function(event){
	var v_picfile = $('#hid_item_pic').val();
	if(v_picfile){
		if(confirm("파일을 추가하시겠습니까?(기존이미지는 삭제됩니다.)")){
			$('#formFile').ajaxSubmit({
				dataType: 'json',
				success: function(data){
					$.each(data,function(){
						var v_chk_result = this["chk_result"];
						var v_msg = this["msg"];
						var v_upfilename = this["upfilename"];

						alert(v_msg);
						if(v_chk_result == 'OK'){
							$('#img_delpic'+$('#filenum').val()).val(v_upfilename);
						}
					});
				}
			});
			$('#frmFileDiv').hide();
		}
	}else{
		alert('선택된 파일이 없습니다.');
	}
	event.preventDefault();
});