오류를 표시하는 jQuery 개요 텍스트 필드

Question

나는 textfield을 가지고 있으며 textfield이 hold three charactes이 아닌 경우 제출 버튼을 비활성화합니다. 내가 지금하고 싶은 것은 textfield굵은 빨간색의 윤곽선이며 여전히 submit 버튼이 비활성화되어 있습니다. 그러나 textfield의 윤곽선을 그릴 수 없으며 동시에 button을 제출할 수없는 것으로 보입니다.

제출 버튼을 사용 중지하기위한 코드는 다음과 같습니다. textfield의 경우이 기능을 수행 할 때 length is < 3의 윤곽을 그릴 수 있습니까? 어떤 도움 thankfull

는

$(function() { 

     $('input[name="updateMessage"]').attr('disabled','disabled'); 
     $('input[name="selectMessageForUpdate"]').keyup(function(){ 
      if($('input[name="selectMessageForUpdate"]').val().length < 3) 
      { 
       $('input[name="updateMessage"]').attr('disabled','disabled'); 
      } 
      else 
      { 
       $('input[name="updateMessage"]').removeAttr('disabled'); 
      } 
     }); 

    }); 

Answer 1

은 CSS에서, attr('disabled')

는 빨간색 테두리를 정의하는 클래스를 추가와 함께 border CSS 속성을 추가

textarea[name=selectMessageForUpdate].disabled { border:5px solid red } 

당신의 js를 :

$(function() { 

     $('input[name="updateMessage"]').attr('disabled','disabled'); 
     $('textarea[name="selectMessageForUpdate"]').keyup(function(){ 
      if($(this).val().length < 3) 
      { 
       $('input[name="updateMessage"]').attr('disabled','disabled'); 
       $(this).addClass('disabled'); // ADD THIS 
      } 
      else 
      { 
       $('input[name="updateMessage"]').removeAttr('disabled'); 
       $(this).removeClass('disabled'); // ADD THIS 
      } 
     }); 

    }); 

은 내가 JS 바이올린을 생성하며

http://jsfiddle.net/tmjaF/8/

Answer 2

그는 버튼을 제출하지, 텍스트 영역의 스타일을하고 싶어 ... 작동하는 것 같다. 지정된 마크 업으로 클래스를 텍스트 영역에 추가하고 입력이 유효 할 때이를 제거하십시오. 또한 입력이 공백 이외의 다른 것인지 확인하십시오.

$(function() { 
    $('input[name=updateMessage]').attr('disabled','disabled'); 
    $('input[name=selectMessageForUpdate]').keyup(function(){ 
     if($('input[name=selectMessageForUpdate]').val().length < 3) 
     { 
      $('input[name=updateMessage]').attr('disabled','disabled'); 
      $('input[name=selectMessageForUpdate]').addClass('someClass'); 
     } 
     else 
     { 
      $('input[name="updateMessage"]').removeAttr('disabled'); 
      $('input[name=selectMessageForUpdate]').removeClass('someClass'); 
     } 
    }); 

}); 

Answer 3

것은 당신의 CSS에 추가

input.indicated_textfield { border: 2px solid red; } 

당신의 자바 스크립트 코드에 addClass 및 removeClass 줄을 추가

$(function() { 

    $('input[name="updateMessage"]').prop('disabled', true); 
    $('input[name="selectMessageForUpdate"]').keyup(function(){ 
     if($('input[name="selectMessageForUpdate"]').val().length < 3) 
     { 
      $('input[name="updateMessage"]').prop('disabled', true); 
      $('input[name="selectMessageForUpdate"]').addClass('indicated_textfield'); 
     } 
     else 
     { 
      $('input[name="updateMessage"]').prop('disabled', false); 
      $('input[name="selectMessageForUpdate"]').removeClass('indicated_textfield'); 
     } 
    }); 

});