서명 날인 필수 입력 체크 어떻게 하나요?
관련링크
본문
안녕하세요
회원가입시 서명 날인 넣어 놨는데
필수 입력 체크 어떻게 하나요?
<?php if($member['mb_3']) { ?>
<br><img src="<?php echo $member['mb_3'] ?>">
<?php } ?>
<input type="hidden" name="mb_3" value="<?php echo $member['mb_3'] ?>" class="form-control input-sm">
<div id="mb_3"></div>
<style type="text/css">
#div_signcontract{ width: 300px; }
.popupHeader{ margin: 10px; }
</style>
<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('#mb_3').append($('<input type="hidden" name="mb_3" class="form-control input-sm">').attr('value',imgData));
closePopUp();
} else {
alert('Please sign');
}
}
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(300);
$("#canvas").height(140);
$("#canvas").css("border","1px solid #000");
var canvas = $("#canvas").get(0);
canvasContext = canvas.getContext('2d');
canvasContext.clearRect(0, 0, $("#canvas").width, $("#canvas").height);
canvasContext.beginPath();
if(canvasContext)
{
//canvasContext.canvas.width = sizedWindowWidth;
canvasContext.canvas.width = 300;
canvasContext.canvas.height = 140;
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>
<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>
</div>
</div>
</div>
submit script 를 어떻게 해야 할지 모르겠네요.
// 서명검사
if ((f.w.value == "") || (f.w.value == "u" && f.mb_3.defaultValue != f.mb_3.value)) {
if($('#mb_3').val()==0){
sweetAlert("서명", "서명이 정상적으로 입력되지 않았습니다.", "error");
$('#mb_3').focus();
return false;
}
}
이렇게 해도 적용이 안되네요
계속 서명이 입력안되었다고만 하네요
답변 2
<input type="hidden" name="mb_3" value="<?php echo $member['mb_3'] ?>" class="form-control input-sm" required>
색상으로 표시된 부분을 추가해보세요.
그리고,
sweetAlert() 이함수가 어디에 정의돼 있는지 출력한 소스엔 없어서..
sweetAlert("서명", "서명이 정상적으로 입력되지 않았습니다.", "error");
위에 소스를 아래 소스로 ...
Alert("서명이 정상적으로 입력되지 않았습니다.");
이렇게 변경후 체크가 되는지 테스트해보시길...
아주옛날 질문이지만..
저도 고민고민하다 방법을 찾아내어
추후에 보실 분들을 위해서 방법을 남깁니다
제 코드 중 일부인데 저는 서명을 여분필드5로 입력받았고
만약 입력이 없는경우 alert를 띄우면서 이벤트를 스탑시키는 코드를 넣었습니다 (이벤트 스탑이없었더니 submit으로 다음페이지로 넘어가버리더라구요)
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_5').append($('<input type="hidden" name="wr_5" class="form-control input-sm">').attr('value',imgData));
closePopUp();
} else {
alert('서명해주세요');
event.preventDefault();
}
}