隐藏DIV标记,直到填写所有文本字段

时间:2016-04-28 12:11:27

标签: javascript jquery html css

我有一个表单,其中包含两个名为email和password的元素,在填充之前,div中的提交将被隐藏。以下是我的脚本,但它不起作用:

string componentName = "";

try
{
    if (Constants.AllowedTyleTypes.Contains(currentTile.tyleType))
    {
        GameObject childSprite = currentTile.transform.FindChild("Sprite").gameObject;

        Animator spriteAnimator = childSprite.GetComponent<Animator>();
        spriteAnimator.SetBool("PassedBy", true); 
    }
} 
catch(System.Exception)
{
    throw new MissingComponentsForAnimationException(componentName, currentTile.name);
}

JQUERY

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

CSS

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

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

3 个答案:

答案 0 :(得分:0)

您可以检查已填充输入的数量,并与总输入数量进行比较。

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

答案 1 :(得分:0)

您可以使用过于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();

然后创建并启动Worker

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

杀死工人

w.terminate();

答案 2 :(得分:0)

我这样做:

&#13;
&#13;
function checkForm() {
    var boxes = document.getElementsByClassName("myinputs");
    for(var i=0; i<boxes.length; i++) {
        if(!boxes[i].value) {
    	    return false;
        }
    }
    var hidden = document.getElementById("hidencontent");
    hidden.setAttribute("class", "visible");
}
&#13;
.hide {
  display: none;
}
&#13;
<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>
&#13;
&#13;
&#13;