텍스트 영역의 JQuery onkey up 기능

Question

내 HTML에 필드가 있고 특정 유효성 검사 규칙에 대한 크기 및 값을 확인하려고합니다. 블록, 그것은 사용자가 적절하게 정보를 완료하는 경우에도 붙어 계속하는 경우는의에 들어갔을 때,

$(function(){ 
    $('#id_title').keyup(function() { 
     data = $(this).val();  
     if (data == " ") { 
      $('#output').text("The title can not be spaces"); 
      $('#SubmitAction').attr("disabled", true); 
     } else { 
      if (data.length < 5) { 
       $('#output').text("The title can not be shorter than 5 characters"); 
       $('#SubmitAction').attr("disabled", true); 
      } else { 
       if (data.length > 30) { 
        $('#output').text("The title can not exceed 30 characters"); 
        $('#SubmitAction').attr("disabled", true); 
       } 
      } 
     } 
     data = $(this).val(); 
    }); 
}); 

건은 다음과 같습니다 다음은 jQuery 코드입니다.

Answer 1

당신은 그것이 당신의 변수에 처음 사용 var에있는 경우 기능

$(function(){ 
     $('#id_title').keyup(function(){ 
     var data = $(this).val();  
     if(data == " "){ 
     $('#output').text("The title can not be spaces"); 
     $('#SubmitAction').attr("disabled", true); 
     } 
     else { 
      if(data.length < 5){ 
      $('#output').text("The title can not be shorter than 5 characters"); 
      $('#SubmitAction').attr("disabled", true); 
      } 
      else{ 
       if(data.length > 30){ 
       $('#output').text("The title can not exceed 30 characters"); 
       $('#SubmitAction').attr("disabled", true); 
       } else $('#SubmitAction').attr("disabled", false); 
      } 


     } 
     data = $(this).val(); 

    }); 
     }); 

Answer 2

에 대한 비활성화 된 후 지역으로, var data = $(this).val(); 수 있도록 다시 입력 필드를 설정해야합니다. 대신 attr의 prop 방법을 사용해야합니다 속성을 수정하기위한,

$(function(){ 
    $('#id_title').keyup(function(){ 
    data = $(this).val(); 
    if(data == " "){ 
    $('#output').text("The title can not be spaces"); 
    $('#SubmitAction').attr("disabled", true); 
    } 
    else { 
     if(data.length < 5){ 
     $('#output').text("The title can not be shorter than 5 characters"); 
     $('#SubmitAction').attr("disabled", true); 
     } 
     else{ 
      if(data.length > 30){ 
      $('#output').text("The title can not exceed 30 characters"); 
      $('#SubmitAction').attr("disabled", true); 
      }else{ 
       $('#SubmitAction').attr("disabled", false); 
      } 
     } 


    } 
    data = $(this).val(); 

}); 
    }); 

Answer 3

disabled는 속성입니다 : 사용자가 제대로 이런 일을 정보를 완료 할 때 그리고 당신은 false에 disabled을 설정해야합니다. 빈 문자를 사용하는 대신 jQuery $.trim 유틸리티 함수를 사용하여 값의 길이를 확인할 수 있습니다. 의 keyup에 텍스트 입력을 검증하는 것은 사용자 친화적 아니라고

$('#id_title').keyup(function() { 
    var val = $.trim(this.value), 
     error = ''; 

    if (val.length === 0) { 
     error = "The title can not be empty"); 
    } else if (val.length < 5 || val.length > 30) { 
     error = "The title can not be shorter than 5 characters and exceed 30 characters"; 
    } 

    $('#output').text(error); 
    $('#SubmitAction').prop("disabled", error.length); 
}); 

참고 사용자가 문자를 입력하고 첫 keyup 이벤트에 오류를 보여주고있다. 대신 blur 이벤트를 사용하는 것이 좋습니다.