Front-end/jQuery
Form에서 필수입력사항 script로 제어하기.
Gi-One
2022. 1. 22. 15:04
#form #alert #value.length
안녕하세요 Gi_1입니다.
form에서 필수입력값은 html에서 required로 간단하게 제어할 수 있습니다.
다만, 수많은 체크박수중 하나이상 체크해야 하는 경우나 최소 3글자 이상 입력받고 싶을 때가 있습니다.
최소 글자수
<form action="">
<input type="text" id="adm_qna_create_txt">
<button class="submit_btn">완료</button>
</form>
<script>
$(document).ready(function(){
$('.submit_btn').click(function() {
var cont = document.querySelector("#adm_qna_create_txt");
if(cont.value.length < 3) {
alert('내용을 최소 3글자 이상 입력해주세요.');
return false;
}
});
});
</script>
input 속성중 minlength 를 이용해서 하여도 됩니다.
저는 이 속성을 모른 상태에서 작업을 진행하여서 제이쿼리를 사용하게 됐습니다.ㅠㅠ
minlength의 조건을 만족하지 못할 경우 css 적용방법은 이렇습니다.
input:invalid {
border: 1px solid #000;
}
체크박스 최소 1개이상 체크
<form action="">
<input type="checkbox" name="account" value="a">
<input type="checkbox" name="account" value="b">
<input type="checkbox" name="account" value="c">
<input type="checkbox" name="account" value="d">
<button class="submit_btn">완료</button>
</form>
<script>
$(document).ready(function(){
$('.submit_btn').click(function() {
if (!$("input[name='account']:checked").val()) {
alert('선택사항을 체크해주세요.');
return false;
}
else {
}
});
});
</script>