フォームフィールドがいっぱいになるまで送信ボタンを無効にする

Question

誰かが私のコードを見て、私がここで何が欠落しているのを見ることができますか？

多量の入力を持つ複数ページのフォームがあります。すべてのフィールドがいっぱいになるまで、「次のページ」ボタンと最後の「送信」ボタンは無効にしておきたいと思います。

私は小規模でプロセスを再作成しようとしていますが、私のテストでは、無効な送信入力を再び有効にすることはできません。私はコンソールをチェックしてJSが可変要素をログしているので、私は何が欠けているのか分からない。

function checkForm() 
 
{ 
 
\t var elements = document.forms[0].elements; 
 

 
\t var cansubmit= true; 
 
\t 
 
\t for(var i = 0; i < elements.length; i++) 
 
\t { 
 
\t \t if(elements[i].value.length == 0 || elements[i].value.length == "" || elements[i].value.length == null) 
 
\t \t { 
 
\t \t \t cansubmit = false; 
 
\t \t } 
 
\t \t document.getElementById("myButton").disabled = !cansubmit; \t 
 
\t } 
 
\t 
 
};

<form> 
 
\t <label for="firstName">First Name:</label> <input type="text" id="firstName" onkeyup="checkForm()" /> 
 
\t 
 
\t <br /> 
 
\t 
 
\t <label for="lastName">Last Name:</label> <input type="text" id="lastName" onkeyup="checkForm()" /> 
 
\t 
 
\t <button type="button" id="myButton" disabled="disabled">Test me</button> 
 
</form>

Answer 1

あなたelements配列には値がありませんあなたのbuttonを、含まれています。これにより、ループは常にcansubmit = false;と評価されます。 https://jsfiddle.net/e00sorLu/2/

function checkForm() 
{ 
    var elements = document.forms[0].elements; 

    var cansubmit= true; 
    for(var i = 0; i < elements.length; i++) 
    { 
     if(elements[i].value.length == 0 && elements[i].type != "button") 
     { 
      cansubmit = false; 
     } 

    } 

    document.getElementById("myButton").disabled = !cansubmit; 
}; 

Answer 2

をそれとも、jQueryのを使用することができます。

代わりにこれを試してみてください。

<script type="text/javascript"> 
     function checkForm() { 
      var cansubmit = false; 
      $('form input[type="text"]').each(function (index, element) { 
       if (element.value == "") { 
        cansubmit = true; 
       } 
      }); 
      document.getElementById("myButton").disabled = cansubmit; 
     } 
    </script> 

Answer 3

回答がすでに受け入れたが、ここにあなたが考慮するかもしれないいくつかの他のものがありました。

あなたはそれが、今設定した道を、空の文字列以外絶対に何のためにあなたがbutton.disabled = falseを設定している""ボタンを有効にします。

1. あなたはvalue.length 3回をチェックしているが、あなたは実際に代わり チェック.valueにしたいです。 lengthプロパティは、単位が文字列であるどのように多くのコードのためonly a numeric valueである - それは今まで ""かnullされませんので、あなたが本当にチェックしている唯一のものは長さ0

   の空の文字列のために非常に 第一条件であります ます。また、空白文字列に複数の空白を占めていない

   、そう" "）が有効になります...または 特殊文字なので、これは有効になります：(function goodByeWorld(evil){//do the bad things})();

2. あなたはcheckForm()を実行していますすべてのフォーム要素の関数 （0を含む）を入力します。これは不要です。

   は別に受け入れ答え&で指摘された<button>、を含むから、常にこれが失敗する原因になります、あなたは をチェックインラインエラーと個々のフォーム要素（望ましい）を検証し、または直前に一度それらのすべてを検証する必要がありますどちらか提出する（提出後にサーバ側の検証&を返すことが好ましい）。

   代わりにonblur()にバインドし、そのフィールドがフォーカスを失ったら、現在の要素の値を引数として送信できます。例えばfunction checkValue(value) {//validate the value}に変更）、HTMLではonblur = checkValue(this)のいずれか、または好ましくはJSファイル内に存在する非インラインイベントハンドラを選択します。

   すべてのキーストロークの後で確認するにはまだonkeyup = checkValue(this)を実行できますが、t.h.eをチェックする代わりに1つの要素のみをチェックするように関数を変更します。 e.n.t.i.r.e.形。何十回も。

   このアプローチでは、個々のフォーム要素の有効性を個別に追跡することができます（値の配列、値または "有効/無効"フラグなどを格納する "有効な"フィールドラベルをオンにして、さまざまなタイプの情報に対してthisを検証します）。個別の要素（たとえば、最小/最大の名前の長さ、特殊文字の削除など）で追加の検証を実行し、各フォーム要素の横にリアルタイムエラーチェックメッセージを表示することができます。

3. デフォルトではcansubmit = trueになりますが、このコードで何をするつもりであれば、あまり意味がありません。 !cansubmitを使用すると、&人がコードを読んでいることを混乱させるだけです。読みやすさを考慮して、disableSubmitに反転して、button.disabled状態と同期してください（trueまたはfalse）。