は、すべてのフォーム項目が有効

Question

ているとき、私は何かを持ついくつかの助けが必要提出有効にする...

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

は、今私は時に提出有効にする簡単なスクリプトを持つようにしたい...私は次の形式を持っていると言いますテキストボックスの値が、私は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; 
        } 

       } 
      } 

     } 

} 

に結合している...だから私はこのようなものを持っている...

空の文字列またはnullでない今私は私が上だと思いますソリューションへの正しいラインが、私はあまりにも早くfalseを返すように、すべての項目が長さゼロの文字列よりも大きいことを確認しようとすると失われます。誰かが私をまっすぐにしてくれますか？

Answer 1

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

これは次のことを行います：要素全体とそのすべての子要素のイベント（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が提案し、それはずっといいとクリーナーですしかし、それはまた、（every法のため）ES5-Shimが必要です。

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

で0

（この男はブリリアントで、ちょうど彼を教えていない）

Answer 2

可能であれば、コードを再発明する代わりにjqueryバリデーションプラグインを使用すると、http://docs.jquery.com/Plugins/Validationが使いやすくなります。

Answer 3

フォームの内容の進捗状況を監視するための方法を見つけることができます。すべてのフィールド条件が満たされると、送信ボタンが表示されます。たぶんそれはあなたのために便利です。あなたのデータが特定の要件を遵守する必要がある場合は、フォームのクライアント側のチェックが改ざんされる可能性があるので、サーバ側のチェックも必要になります。言い換えれば、クライアントサイドのフォームチェックは単なるユーザビリティの向上です。

Answer 4

これを行うにはいくつかの方法があります...ボタンを有効にしたままにしておきますが、送信時にフォームデータの有効性を確認するために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; 
    } 
} 

他の方法は、各入力を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); 
    } 

後者の方法は、フォームが提出時に有効であるかどうかを判断するために「状態」変数にあなたを保持する必要が、またはすべての値をもう一度チェックしてください。

これはいくつかの光を放ちたいと思っています。私のコード例がいくつか役立つことを願っています。