JavaScript 텍스트 유효성 검사 활성화 버튼

Question

안녕하세요 두 개의 텍스트 상자와 버튼이 있습니다. "playerName"텍스트 상자에 무언가가 포함되어 있고 "upperLimit"텍스트 상자에 0보다 큰 정수가 포함 된 경우에만 버튼이 활성화되기를 원합니다. 버튼이 비활성화 된 다음 동적으로 변경되기를 원하는데, 사용자가 텍스트 상자에 입력 할 때 계속 변경됩니다. 단추가 활성화되어야하는지 확인하기위한 텍스트 상자. Heres는 내가 무엇을 시도했다 :

자바 스크립트 :

var playerNameValid = false; 
var upperLimitValid = false; 


function validatePlayerName() 
{ 
    if (document.getElementById("initialPlayerNameChoice").Value == "") 
    { 
     playerNameValid = false; 
     document.getElementById("startGameButton").disabled = true; 
    } 
    else 
    { 
     playerNameValid = true; 

     if (upperLimitValid == true) 
     { 
      document.getElementById("startGameButton").disabled = false; 
     } 
    } 
} 


function validateUpperLimit() 
{ 
    if (isNaN(document.getElementById("initialUpperLimitChoice").valuetextContent)) 
    { 
     upperLimitValid = false; 
     document.getElementById("startGameButton").disabled = true; 
    } 
    else 
    { 
     upperLimitValid = true; 

     if (playerNameValid == true) 
     { 
      document.getElementById("startGameButton").disabled = false; 
     } 
    } 
} 

마크 업 : 뒤에

<asp:Label ID="enterNameLabel" runat="server" Text="Enter your name: "></asp:Label> 
<asp:TextBox ID="initialPlayerNameChoice" runat="server"></asp:TextBox> 
<br /><br/> 
<asp:Label ID="enterUpperLimitLabel" runat="server" Text="Enter upper limit: "></asp:Label> 
<asp:TextBox ID="initialUpperLimitChoice" runat="server"></asp:TextBox> 
<br /><br /> 
<asp:Button ID="startGameButton" enabled="false" runat="server" Text="Start Game" /> 

코드 :

initialPlayerNameChoice.Attributes.Add("onkeyup", "javascript:validatePlayerName()"); 
    initialUpperLimitChoice.Attributes.Add("onkeyup", "javascript:validateUpperLimit()"); 

Answer 1

당신은 거의있어.

if (document.getElementById("initialPlayerNameChoice").Value == "") 
//In JavaScript there is no property called 'Value' -----^ use 'value' instead: 
if (document.getElementById("initialPlayerNameChoice").value == "") 


if (isNaN(document.getElementById("initialUpperLimitChoice").valuetextContent)) 
//Again, in JavaScript there is no property called 'valuetextContent' ---^ 
//Furthermore, 0 is a number, so if you kept this, the button would enable on 0 
//You can use a regular expression to make sure it is a number > 0, and 
//re-arranging your function eliminates re-checking of logic: 
function validateUpperLimit() 
{ 
    var num = document.getElementById("initialUpperLimitChoice").value.match(/^\d+$/); 
    if(num && num[0] > 0) 
    { 
    upperLimitValid = true; 

    if (playerNameValid == true) 
    { 
     document.getElementById("startGameButton").disabled = false; 
    } 
    } 
    else 
    { 
    upperLimitValid = false; 
    document.getElementById("startGameButton").disabled = true; 
    } 
} 

당신은 단지 validate() 기능을 갖는 두 필드 onkeyup 것을 호출하도록되어 구현할 수있는 또 다른 방법 : 코드에서 수정해야 몇 줄이 있습니다. 유효성 검사 함수를 true 또는 false로 변경하면 전역 변수의 사용을 제거 할 수 있고 논리가 더 적합합니다.

당신의 onkeyup 코드 대신 다음

function validate(){ 
    if(validatePlayerName() && validateUpperLimit()) 
    document.getElementById('startGameButton').disabled = false; 
    else 
    document.getElementById('startGameButton').disabled = true; 
} 

function validatePlayerName(){ 
    if(document.getElementById('initialPlayerNameChoice').value != '') 
    return true; 
    else 
    return false; 
} 

function validateUpperLimit(){ 
    var num = document.getElementById('initialUpperLimitChoice').value.match(/^\d+$/); 
    if(num && num[0] > 0) 
    return true; 
    else 
    return false; 
} 

그리고 (난 당신이 javascript: 부분을 필요가 있다고 생각하지 않습니다하지만 당신을 짖는 경우, 그냥 다시 던져 그래서 내가 완전히 확실하지 않다) :

initialPlayerNameChoice.Attributes.Add("onkeyup", "validate()"); 
initialUpperLimitChoice.Attributes.Add("onkeyup", "validate()");