스킨사용 중 필수입력 체크 질문
본문
스킨을 다운받아 사용중입니다.
글쓰기 페이지 하단에 심어서 사용중이고,
입력 확인 모두 잘되는데
필수입력으로 처리가 안됩니다. 그래서 서명을 안해도 그냥 글쓰기가 완료되버리더라구요.
<script type="text/javascript">
var isSign = false;
var leftMButtonDown = false;
jQuery(function(){
//Initialize sign pad
init_Sign_Canvas();
});
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#page').find('p').remove();
jQuery('#page').find('img').remove();
jQuery('#page').append(jQuery('<p>아래의 서명날인을 사용합니다.</p>'));
jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value',imgData));
closePopUp();
} else {
alert('서명해주세요');
event.preventDefault();
}
}
function closePopUp() {
jQuery('#divPopUpSignContract').popup('close');
jQuery('#divPopUpSignContract').popup('close');
}
function init_Sign_Canvas() {
isSign = false;
leftMButtonDown = false;
//Set Canvas width
var sizedWindowWidth = $(window).width();
if(sizedWindowWidth > 700)
sizedWindowWidth = $(window).width() / 2;
else if(sizedWindowWidth > 400)
sizedWindowWidth = sizedWindowWidth - 100;
else
sizedWindowWidth = sizedWindowWidth - 50;
//$("#canvas").width(sizedWindowWidth);
$("#canvas").width(283);
$("#canvas").height(80);
$("#canvas").css("border","1px solid #000");
var canvas = $("#canvas").get(0);
canvasContext = canvas.getContext('2d');
if(canvasContext)
{
//canvasContext.canvas.width = sizedWindowWidth;
canvasContext.canvas.width = 283;
canvasContext.canvas.height = 80;
canvasContext.fillStyle = "#fff";
canvasContext.fillRect(0,0,sizedWindowWidth,200);
canvasContext.moveTo(50,150);
canvasContext.lineTo(sizedWindowWidth-50,150);
canvasContext.stroke();
canvasContext.fillStyle = "#000";
canvasContext.font="20px Arial";
canvasContext.fillText("x",40,155);
}
// Bind Mouse events
$(canvas).on('mousedown', function (e) {
if(e.which === 1) {
leftMButtonDown = true;
canvasContext.fillStyle = "#000";
var x = e.pageX - $(e.target).offset().left;
var y = e.pageY - $(e.target).offset().top;
canvasContext.moveTo(x, y);
}
e.preventDefault();
return false;
});
$(canvas).on('mouseup', function (e) {
if(leftMButtonDown && e.which === 1) {
leftMButtonDown = false;
isSign = true;
}
e.preventDefault();
return false;
});
// draw a line from the last point to this one
$(canvas).on('mousemove', function (e) {
if(leftMButtonDown == true) {
canvasContext.fillStyle = "#000";
var x = e.pageX - $(e.target).offset().left;
var y = e.pageY - $(e.target).offset().top;
canvasContext.lineTo(x,y);
canvasContext.stroke();
}
e.preventDefault();
return false;
});
//bind touch events
$(canvas).on('touchstart', function (e) {
leftMButtonDown = true;
canvasContext.fillStyle = "#000";
var t = e.originalEvent.touches[0];
var x = t.pageX - $(e.target).offset().left;
var y = t.pageY - $(e.target).offset().top;
canvasContext.moveTo(x, y);
e.preventDefault();
return false;
});
$(canvas).on('touchmove', function (e) {
canvasContext.fillStyle = "#000";
var t = e.originalEvent.touches[0];
var x = t.pageX - $(e.target).offset().left;
var y = t.pageY - $(e.target).offset().top;
canvasContext.lineTo(x,y);
canvasContext.stroke();
e.preventDefault();
return false;
});
$(canvas).on('touchend', function (e) {
if(leftMButtonDown) {
leftMButtonDown = false;
isSign = true;
}
});
}
</script>
<tr>
<th scope="row">
<label for="wr_1" class="sound_only">서명<strong >필수</strong></label>
</th>
<td>
<?php if($write['wr_1']) { ?>
<br><img src="<?php echo $write['wr_1'] ?>">
<?php } ?>
<input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" class="form-control input-sm">
<div id="wr_1"></div>
<style type="text/css">
#div_signcontract{ width: 283px; }
.popupHeader{ margin: 10px; }
</style>
<div data-role="page">
<div id="page" data-role="content">
</div>
<div data-role="popup" id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<canvas id="canvas">Canvas is not supported</canvas>
<div>
<input id="btnSubmitSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="서명확인" onclick="fun_submit()" />
<input id="btnClearSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" />
</div>
</div>
<br><b style="color:red">※ 위 네모칸 안에 반드시 서명을 넣어주셔야 가입 신청서를 제출하실 수 있습니다.<br>
'PC'에서 작성하신 경우 마우스로 서명(그려서)을 해주시고,<br>
'모바일'의 경우 손가락으로 그려서 서명해주시면 됩니다.<br>
서명이 끝나시면 반드시 '서명확인' 버튼을 눌러주세요.</b>
</div>
</div>
</div>
</td>
<input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" class="form-control input-sm">
이부분에 "required" 넣엇더니
입력하라고만 나오고, 입력을 해도 넘어가질 않더라구요.
혹시 필수입력하게하는 다른 방법이 있을까요?
답변 2
원본 소스가 조금 이상하게 되어있네요
<form name="fwrite"~~~
~~~
<input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" <---삭제
===============================
jQuery('#page').append(jQuery('<p>아래의 서명날인은 사용합니다.</p>'));
jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value',imgData)); <---- 삭제
jQuery("input[name='wr_1']").val(imgData); <--- 추가
=======================
function fwrite_submit(f)
{
~~
if(!f.wr_1.value){alert('서명 후 서명확인 버튼을 반드시 누르세요'); return false;} <--- 적당한 위치에 추가
jQuery('#page').append(jQuery('<p>아래의 서명날인을 사용합니다.</p>'));
//jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value',imgData));
jQuery("input[name='wr_1']").val(imgData);
<script>
function fwrite_submit(f) {
if(!f.wr_1.value){alert('서명 후 서명확인 버튼을 반드시 누르세요');
return false;
}
</script>
추가하였는데, 서명안해도 글쓰기가 되버립니다.
조금 더 도와주실수있을까요..
canvas mousedown 이벤트에 isSign을 true로 바꾸는 방식으로 체크하면 될것 같아요
조금 더 자세하게 설명 부탁드립니다.
