[Jquery] 유형별 유효성 검사&활용 사용방법!!

너무나 많이 쓰이는 제이쿼리의 유효성 검사를 유형별로 정리해보겠습니다.

유효성 검사 유형은 대표적으로 input, radio, select, checkbox가 있습니다.

(계속계속 업데이트 진행중입니다!)

유효성 검사

 

 

input / textarea

if($("#아이디값").val() == ""){
    alert("경고창입니다.");
    $("#아이디값").focus();
    return false;
}
 
if($("input[name=이름값]").val() == ""){
    alert("경고창입니다.");
    $("#아이디값").focus();
    return false;
}

 

 

 

radio

if($("input:radio[name=이름값]:checked").val() == "N"){
    alert("경고창입니다.");
    $("#아이디값").focus();
    return false;
}

if($("input:radio[name=이름값]:checked").length < 1){
    alert("설문항목에 선택해주세요.");
    return false;
}
 

값이 없을 경우

 

 

 

 

select 

if($("select[name=이름값]").val() == ""){
    alert("경고창입니다.");
    $("#아이디값").focus();
    return false;
}
 
if($("#아이디값").val() == ""){
    alert("경고창입니다.");
    $("#아이디값").focus();
    return false;
}
 

 

//select 의 텍스트 값을 확인하는 조건식입니다.
 
if($("select[name=resv_program] > option:selected").text() == "good"){ 
 
}
 

특정 텍스트 값 확인

 

 

$("#prgm_type option:checked").text();

아이디 값에 대한 텍스트값 추출

 

 

 

if($('#selectBoxID > option:selected').val()) {
    alert("selected 되어있는 상태입니다.");
}
 
if(!$('#selectBoxID > option:selected').val()) {
    alert("selected가되어있지 않는 상태입니다.");
}
 

 

select 박스에 selected가 되어있는지 확인

 

 

 

 

 

checkbox

 

$("#unit_yn").change(function(){
  if($("#unit_yn").is(":checked")){
      alert("체크박스 선택");
  }else{
      alert("체크박스 해제");
  }
});

 

체크박스 체크 선택/해제에 대한 실시간 반응 (change함수)

 

 

 

 

 

 

반응형

---

 

 

 

활용

 

 

select 

 

//select 클릭하고 box 옵션 선택 시의 조건문입니다.
 
$("select[name=resv_program]").click(function(){
    
    if($("select[name=resv_program] > option:selected").val() == "1"){ 
        $("#visitTime").show();    
    }else{
        $("#visitTime").hide();
        $("#resv_time").val("");
    }
});
 
 

 

//select 박스의 옵션값과 특정값이 같을 경우 selected 설정해줍니다.
 
var bi_source = "${Info.bi_source}";
    
$(function(){
    
    $('#bi_breed option').each(function(index, el){
        if(el.value == bi_breed){
            $('#bi_breed').val(bi_breed).prop('selected',true);
        }
    });
    
});

 

 

 

 

 

 

checkbox 

//특정 클래스의 체크박스를 클릭할 경우의 체크 여부 조건식입니다.
 
$("input.sttus.all:checkbox").click(function(){
    if(this.checked){
        $("input.sttus.elem:checkbox").prop("checked", false);
    }
});
 

 

 

 

 

 

 

radio

$('.check').click(function(){
    var radioCheck = new Array();
    $('.check:checked').each(function() {
        radioCheck.push(this.value);
    });
    
    if(radioCheck.length > 3 ){
        
        alert("3개까지만 선택이 가능합니다.");
        $(".radio").attr("tabindex", -1).focus();
        return false;
        }
});
 
 
<div class="radio radio-inline">
  <c:forEach var="result" items="${queryList}" varStatus="sts">                       
        <input type="radio" class="check" id="qe_answer0${sts.count}" name="qe_answer0${sts.count}" value="${result.main_code}" style="margin-left:30px;"><label for="qe_answer0${sts.count}">${result.code_name}</label>
    </c:forEach>
</div>
 
 

체크된 갯수를 파악해서 일정한 개수를 컨트롤할 수 있습니다.

예) 3개까지만 선택 가능하도록 설정