0

ねえ、2つのテキストボックスと1つのボタンがあります。「playerName」テキストボックスに何かが含まれ、「upperLimit」テキストボックスに整数> 0が含まれている場合にのみ、ボタンを有効にします。ボタンを無効にして、ユーザーがテキストボックスに入力しているときに動的に変更し、常に何をチェックするかを確認します。ボタンをアクティブにする必要があるかどうかを確認するテキストボックス。これが私が試したことです：

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

マークアップ：

<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()");
4

1 に答える 1

0

あなたはほとんどそれを手に入れました。コードで修正する必要があるのは、数行だけです。

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 を返すようにすると、グローバル変数の使用をなくすことができ、ロジックがより理にかなったものになります。

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

そして代わりにあなたのonkeyupコードのために（私はあなたがその部分を必要としているとは思わないが、javascript:私は完全にはわからないので、それがあなたに吠えたら、それを元に戻してください）：

initialPlayerNameChoice.Attributes.Add("onkeyup", "validate()");
initialUpperLimitChoice.Attributes.Add("onkeyup", "validate()");
于 2012-11-15T19:44:40.220 に答える