JavaScript文本框验证启用按钮

Question

Hey so I have two text boxes and a button. I only wanted the button enabled when the "playerName" textbox contains something and the "upperLimit" textbox contains a integer > 0. I want the button to start disabled then dynamically change as the user is typing in the textbox, constantly checking whats in the textboxes to see if the button should be activated. Heres what I've tried:

JavaScript:

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;
        }
    }
}

Markup:

<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" />

Code Behind:

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

Answer 1

You've almost got it. There are just a few lines you need to fix in your code:

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;
  }
}

Another solution that you could implement is having just a validate() function, and having both fields call that onkeyup . If you changed your validation functions to return true or false, then you could eliminate the use of global variables and the logic makes more sense.

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;
}

And then instead for your onkeyup code (I don't think you need the javascript: part but I'm not completely sure so if it barks at you, just throw it back in):

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