-1

私は何かについて助けが必要です...私は次のフォームを持っていると言います...

<form name="" id="" method="" action="">

    <input type="text" id="text1" name="text1" />
    <br />
    <br />

    <input type="text" id="text2" name="text2" />
    <br />
    <br />

    <input type="text" id="text3" name="text3" />
    <br />
    <br />

    <input type="text" id="text4" name="text4" />
    <br />
    <br />
    <input type="submit" value="let's go" disabled="disabled" />

</form>

ここで、テキストボックスの値が空の文字列でもnullでもない場合に、送信を有効にする簡単なスクリプトが必要です...

だから私はこのようなものを持っています..これをwindow.onloadにバインドします

 function enableButton(){

    var formitemsArray = ['text1','text2','text3','text4'],
       i;

        // Loop through all items
        for(i=0;i<formitemsArray.length;i++){

            // validate the length on the keypress...
            formitemsArray.onkeypress = function(){

                // loop through all the items again
                for(j=0;j<formitemsArray.length;j++){

                    if(formitemsArray[j] == "" || formitemsArray[j] == null ){
                        // return false or something???
                    }else{
                        document.getElementById("submitButton").disabled = false;
                    }

                }
            }

        }

}

今、私は解決策に正しい方向に進んでいると思いますが、falseを返すのが早すぎるため、すべての項目が長さゼロの文字列より大きいことを確認しようとすると迷子になります。誰かが私をまっすぐにしてくれませんか？

4

4 に答える 4

3

イベントバブリングへようこそ！

これにより、次のことが行われます。要素全体とそのすべての子でイベント（onkeypress）をリッスンします。つまり、次のことができます。

document.getElementById('form-id').onkeypress = function(e) {
    var text1 = document.getElementById('text1'),
        text2 = document.getElementById('text2'),
        text3 = document.getElementById('text3'),
        text4 = document.getElementById('text4')

    if (text1.value.length > 0 &&
        text2.value.length > 0 &&
        text3.value.length > 0 &&
        text4.value.length > 0) {
        document.getElementById('submit-button').disabled = false
    }

    // As an aside, for later: if you want to get the element
    // that triggered the event, you have to do the following
    // to be cross-browser:
    var evt = e || window.event, // IE doesn't get the event passed by argument
        target = e.target || e.srcElement // 'target' is official, old versions of FF used 'srcElement'

    // With the 'target' variable, you can now play.
}

別のより一般的な解決策がありますが、それはあなたのニーズに合わないかもしれません（それはforEachシムを必要とすることに注意してください：

// Declare a counter variable
var count = 0
document.getElementById('form-id').onkeypress = function(e) {
    // Get all the inputs!
    var inputs = this.getElementsByTagName('input')

    // Now loop through all those inputs
    // Since a NodeList doesn't have the forEach method, let's borrow it from an array!
    [].forEach.call(inputs, loopThroughInputs)
}
function loopThroughInputs(input) {
    // First check the type of the input
    if (input.type === 'text') {
        // If the value is correct, increase the counter
        if (input.value.length > 0) {
            count++
        }
        // If the 4 inputs have increased the counter, it's alright!
        if (count === 4) {
            document.getElementById('submit-button').disabled = false
        }
    }
}

そして今、このコードは@Esailijaによって提案されました、そしてそれはずっと良くてきれいです。ただし、 ES5-Shim（everyメソッド用）も必要です。

document.getElementById('form-id').onkeypress = function(e) {
    var inputs = [].slice.call( this.querySelectorAll( '[type=text]') );
    document.getElementById('submit-button').disabled = !inputs.every(function(input){
        return !!input.value;
    });
}

（この男は素晴らしいです、ただ彼に言わないでください）

于 2012-04-04T13:06:47.010 に答える
1

これを行うにはいくつかの方法があります...1つはボタンを有効にしておくことですが、送信時にjavascriptを使用してフォームデータの有効性を確認します。これの利点は、ユーザーが[送信]をクリックし、データが検証されることを期待しているときに、検証コードが1回だけ実行されることです（少なくとも私はそうします）。

function validateForm() {
  var formElement = document.forms[0]; // you didn't give me a name
  for(var i = 0, l = formElement.elements.length; i < l; i++ ) {
      if( formElement.elements[i].value.length === 0 ) {
         return false;
      }
      return true;
  }
}

もう1つの方法は、ライブ検証です。これは、各入力onBlurを検証します（フォーカスが失われます）。この方法には、どの値が悪いかをリアルタイムでユーザーに示すという利点がありますが、フォーム要素の数とチェックの導入方法によっては、リソースが非常に多くなる可能性があります。

個人的には、最初の提案を行います。ただし、各要素を検証することを選択した場合は、次のようにします。

  var formElement = document.forms[0]; // you didn't give me a name
  for(var i = 0, l = formElement.elements.length; i < l; i++ ) {
      formElement.elements[i].addEventListener('blur', function() {
           if( this.value.length === 0 ) {
              alert('this input is invalid');
           }
      }, false);
  }

後者の方法では、「state」変数を保持して、送信時にフォームが有効かどうかを判断するか、すべての値を再度確認する必要があります。

これがいくつかの光を当てることを願っています、そして私のコード例がいくつかを助けることを願っています。

于 2012-04-04T13:19:26.670 に答える
0

このjsfiddleには、フォームの内容の進行状況を監視する方法があります。すべてのフィールド条件が満たされると、送信ボタンが表示されます。多分それはあなたのために役立つでしょう。フォームのクライアント側のチェックが改ざんされる可能性があることに注意してください。データが特定の要件に準拠する必要がある場合は、サーバー側のチェックも常に必要です。言い換えると、クライアント側のフォームチェックは、単に使いやすさの向上にすぎません。

于 2012-04-04T13:17:07.797 に答える
0

可能であれば、コードを再発明する代わりにjquery検証プラグインを使用してください。http：//docs.jquery.com/Plugins/Validationとても使いやすいです。

于 2012-04-04T12:54:04.957 に答える