input 빈값체크
본문
input 빈값 체크에 대해서 여쭤보려고 합니다.
구글 찾아봐도 버튼을 클릭시 빈값을 체크하고 있더라구요.
제가 원하는 것은
모든 input이 빈값이 없으며, 동의 하기 버튼에 체크하고나면 버튼에 클래쓰를 추가하여 활성화 시키려고 합니다.
아래는 제 폼입니다.
<form name="ad_user" onsubmit="doSubmit();">
<div class="userinfo_div" >
<div>
<p>업체명</p>
<label>
<input type="text" value="" id="comPany" placeholder="업체명을 입력해주세요.">
<div class="buttom_line"></div>
</label>
</div>
<div>
<p>이름</p>
<label>
<input type="text" value="" id="useName" placeholder="이름을 입력해주세요.">
<div class="buttom_line"></div>
</label>
</div>
<div>
<p>휴대폰</p>
<label class="tel">
<div class="tttt">
<input type="text" name="tel1" class="tt" size="3" maxlength="3" id="tTel1"> -
<input type="text" name="tel2" class="tt" size="4" maxlength="4" id="tTel2"> -
<input type="text" name="tel3" class="tt" size="4" maxlength="4" id="tTel3">
</div>
<div class="buttom_line"></div>
</label>
</div>
</div>
<div class="userinfo_div agree_wrap">
<label class="all"><input type="checkbox" id="check_all"><em></em>이용약관 전체 동의</label>
</div>
<div class="userinfo_div only_pc">
<button type="button" class="save {{-- gra_btn --}}" onclick="location.href='{{ route('end_join') }}'">가입</button>
</div>
{{-- input 모든내용 입력하면 버튼 활성화 --}}
<div class="estimate only_m">
<a href="{{ route('end_join') }}" class="{{-- gra_btn --}}" >가입</a>
{{-- input 모든내용 입력하면 버튼 활성화 --}}
</div>
</form>
저는 아래대로 하긴 했는데 잘 안되네요..ㅠ
<script>
$(function () {
$("form").find("input[type='text']").each(function () {
if (
$(this).val().trim() != "" && $('input[type="checkbox"]').is(":checked") == true
) {
$(".save").addClass("gra_btn");
$(".msave").addClass("gra_btn");
} else {
$(".save").ramoveClass("gra_btn");
$(".msave").ramoveClass("gra_btn");
}
});
});
</script>
답변 4
버튼을 감싸고 있는 div에 임의로 button 이라고 class 추가 했습니다.
<script>
$(".userinfo_div input, #check_all").on("change", function(){
$(".button").hide();
for(i=0; i<$(".userinfo_div input").length; i++){
if(!$(".userinfo_div input").val()){
alert("입력하세요");
$(this).focus();
return false;
}
}
if($("#check_all").is(':checked') === false){
return false;
}
$(".button").show();
})
</script>
답변 감사합니다! 혹시 input에 value 값을 지우면 다시 button이 안보이게 하는 방법도 있나요?
우선
<form name="ad_user" onsubmit="doSubmit();">
를 보시면
onsubmit 은 submit 이 될때
doSubmit() 함수를 호출해야 하는데 존재 하지 않고
<form 의 특성상 submit이 발생하면 action 에 해당되는 페이지로 이동하게 되어있습니다.
그런데,
action을 지정하는 내용이 존재하질 않고있네요
그리고,
onSubmit에 함수를 적용할때는 강제로 폼이 넘어가는걸 막은상태로
진행하게 하기위해서
onsubmit="return doSubmit();"
으로 처리를하는게 좋습니다.
두번째
<script>
$(function () {
$("form").find("input[type='text']").each(function () {
if (
$(this).val().trim() != "" && $('input[type="checkbox"]').is(":checked") == true
) {
$(".save").addClass("gra_btn");
$(".msave").addClass("gra_btn");
} else {
$(".save").ramoveClass("gra_btn");
$(".msave").ramoveClass("gra_btn");
}
});
});
</script>
이 내용은 jQuery에서 ready와 동일한 형태의 축약형인데
ready 는 body = onload와 동일한 기능입니다.
즉, <form이 존재하는 페이지가 화면에 노출될때 실행하는 내용입니다.
<form>의 input값을 체크하려면
onSubmit시에 하는게 옳은데
onLoad시에 하면 아무값이 존재하지 않거나 PHP로 설정한 기본값만 체크하게 되겠죠
즉, 시점이 잘못되었다는 이야기입니다.
정리하면
onSubmit함수가 필요하고
return 으로 제어를 해야 하고
ready의 내용은
onSubmit으로 들어가는게 맞겠죠
형태로
오류가 있어서 수정 하려 했는데 이미 채택 되어서 추가로 작성합니다.
<script>
$(".userinfo_div input, #check_all").on("change", function(){
$(".button").hide();
for(i=0; i<$(".userinfo_div input").length; i++){
if($(".userinfo_div input").eq(i).val() == ""){
//console.log(i+"번째 입력값 오류")
return false;
} else {
//console.log(i+"번째 입력 성공")
}
}
//console.log("입력값 체크 완료");
if($("#check_all").is(':checked') === true){
//console.log("체크 성공")
$(".button").show();
} else {
//console.log("체크 실패")
return false;
}
})
</script>
.on("change") 를
.on("change, keyup") 으로
하시면 지웠을 경우 안보이게 될것 같습니다.
현재 change 는 input에서 포커스가 나갔을 경우 체크 하는거라서
지운 상태에서는 계속 버튼이 보이다가 다른곳 아무데나 클릭하면 사라지게 되고
keyup 추가 하면 키 입력 할 때마다 체크 해서 버튼을 생성, 삭제 합니다.
와 정말 감사합니다ㅠ