すべてのテキストフィールドが入力されるまでDIVタグを非表示にします

Question

私は電子メールとパスワードという2つの要素を持つフォームを持っています。以下は私のスクリプトですが、それは働いていない：

<button id="sign_in_button" class='upperbutton' data-role="none" hidden="inline"></button> 

jQueryの

$(document).ready(function() { 
    var $input = $('#email,#password') 
    $input.keyup(function() { 
     var trigger = false; 
     $input.each(function() { 
      if (!$(this).val()) { 

      } 
     }); 
     $("#sign_in_button").fadeIn(); 
    }); 
}); 

CSS

.upperbutton { 
    position:absolute; 
    top:5px; 
    width:80px; 
    height:30px; 
    border:none; 
    background-color:#2797bf; 
    background-image:url(imgs/checkmark.png); 
    background-repeat:no-repeat; 
    color:#FEFEFE; 
    left:90%; 
} 

Answer 1

あなたが満たされた入力用の番号を確認し、全入力の数と比較することができます。

$input.on('keyup'function() { 
    var trigger = false; 
    filled = $input.filter(function() { 
     return this.value.length; 
    }).length; 
    if(filled == $input.length) 
     $("#sign_in_button").fadeIn(); 
    else 
     $("#sign_in_button").fadeOut(); 
}); 

Answer 2

あまりにもjavascript Workersオブジェクトも使用できます。

最初にブラウザがワーカーを受け入れるかどうかを確認します。

if(typeof(Worker) !== "undefined") { 
    // Yes! Web worker support! 
    // Some code..... 
} else { 
    // Sorry! No Web Worker support.. 
} 

次に、js関数を使用してスクリプトを作成します。

function checkAllFilled() { 
    // Code for check all your inputs 
} 

checkAllFilled(); 

それから私はこのようにそれを行うだろうと労働者

w.terminate(); 

Answer 3

を殺す

if(typeof(w) == "undefined") { 
    w = new Worker("check_inputs.js"); 
} 

ワーカー

を作成して起動します。

function checkForm() { 
 
    var boxes = document.getElementsByClassName("myinputs"); 
 
    for(var i=0; i<boxes.length; i++) { 
 
     if(!boxes[i].value) { 
 
    \t  return false; 
 
     } 
 
    } 
 
    var hidden = document.getElementById("hidencontent"); 
 
    hidden.setAttribute("class", "visible"); 
 
}

.hide { 
 
    display: none; 
 
}

<input type="text" class="myinputs" onblur="checkForm()" name="foo"> 
 
<br> 
 

 
<input type="text" class="myinputs" onblur="checkForm()" name="bar"> 
 

 
<div class="hide" id="hidencontent"> 
 
    <h1> 
 
    You found it! 
 
    </h1> 
 
</div>