자바 스크립트를 사용하여 버튼 클릭시 클래스 추가

Question

사용자 이름을 사용할 수 있는지 확인하려고합니다. 자바 스크립트에서 버튼 클릭 이벤트를 사용하지 않지만 사용자가 텍스트 상자에 아무 것도 입력하지 않고 버튼을 직접 누르면 사용 가능한 것으로 표시됩니다.

그래서 사용자가 텍스트 상자에 아무 것도 입력하지 않고 버튼을 누르면 "일부 텍스트를 입력하십시오."라는 메시지를 표시하려고합니다. 그래서 어떻게 할 수 있습니까? 여기

내 코드입니다 :

<script type="text/javascript"> 
    $(function() { 
     $("#<% =btnavailable.ClientID %>").click(function() { 
      $("#dvMsg").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow"); 
      $.post("LoginHandler.ashx", { uname: $("#<% =txtUserName.ClientID %>").val() }, function (result) { 
       if (result == "1") { 
        $("#dvMsg").html('Already exists!').addClass('messageboxerror').fadeTo(900, 1); 
       } 
       else if (result == "0") { 
        $("#dvMsg").html('Available').addClass('messageboxok').fadeTo(900, 1); 
       } 
       else { 
        $("#dvMsg").html("Error!").addClass('messageboxerror').fadeTo(900, 1); 
       } 
      }); 

     }); 
     $("#<% =btnavailable.ClientID %>").ajaxError(function (event, request, settings, error) { 
      alert("Error requesting page " + settings.url + " Error:" + error); 
     }); 

    }); 
</script> 

그리고 이것은 내 CSS는 다음과 같습니다

<style> 
    .messagebox { 
     position:absolute; 
     width:100px; 
     margin-left:30px; 
     border:1px solid #c93; 
     background:#ffc; 
     padding:3px; 
    } 
    .messageboxok { 
     position:absolute; 
     width:auto; 
     margin-left:30px; 
     border:1px solid #349534; 
     background:#C9FFCA; 
     padding:3px; 
     font-weight:bold; 
     color:#008000; 
    } 
    .messageboxerror { 
     position:absolute; 
     width:auto; 
     margin-left:30px; 
     border:1px solid #CC0000; 
     background:#F7CBCA; 
     padding:3px; 
     font-weight:bold; 
     color:#CC0000; 
    } 
    #dvMsg { 
     height: 15px; 
     width: 142px; 
     z-index: 1; 
     left: 172px; 
     top: 126px; 
     position: absolute; 
    } 
</style> 

Answer 1

txtUserName이 비어 있는지 확인하고 메시지를 표시합니다.

<script type="text/javascript"> 
    $(function() { 
     $("#<% =btnavailable.ClientID %>").click(function() { 
     if ($("#<% =txtUserName.ClientID %>").val() == "") { 
      $("#dvMsg").removeClass().addClass('messageboxerror').text('please enter some text').fadeIn("slow"); 
     } else { 
      $("#dvMsg").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow"); 
      $.post("LoginHandler.ashx", { uname: $("#<% =txtUserName.ClientID %>").val() }, function (result) { 
      if (result == "1") { 
       $("#dvMsg").html('Already exists!').addClass('messageboxerror').fadeTo(900, 1); 
      } 
      else if (result == "0") { 
       $("#dvMsg").html('Available').addClass('messageboxok').fadeTo(900, 1); 
      } 
      else { 
       $("#dvMsg").html("Error!").addClass('messageboxerror').fadeTo(900, 1); 
      } 
      }); 
     } 
    }); 

    $("#<% =btnavailable.ClientID %>").ajaxError(function (event, request, settings, error) { 
     alert("Error requesting page " + settings.url + " Error:" + error); 
    }); 
}); 
</script> 

Answer 2

사용 경우이 같은 문 :

if($("#yourUserNameTextFieldID").val().length > 0) 
{ 
    //execute your test 
} 
else 
{ 
    // show a message 
} 

할 수 있습니다 또한 테스트 서버 측 .