Question

我尝试使用jquery检查具有动态创建的表单字段的表单，以确保在提交之前已填充所有输入字段。我想隐藏提交链接，直到所有字段都填满。这是我到目前为止所做的。

$( 'form#form_id' ).change(function(e) {
 $(":input").each(function() {
    if($(this).val() === ""){
        $("#showlink").hide();
      }else{
        $("#showlink").show();
      }
    });
});
<div id="showlink">
        <a href="#" id="submitBtnId" onclick="addDuctClickHandler();" data-icon="check" data-role="button" data-inline="true" data-theme="b">Submit Final Test</a>
</div>

我在这里错过了什么吗？

Answer 1

您将遍历每个字段（使用each功能）。当值为空时，隐藏链接，但随后继续在其他字段上运行。当值为空时，您应该放置一个'break'语句，以便进一步处理停止。通过所有字段并维护布尔参数甚至会更好。在循环之后，根据布尔参数隐藏或显示链接。

像这样：

$('#showlink').hide(); // Assume form is incomplete

$( 'form#form_id' ).change(function(e) {
 var complete = true; // Set start of boolean expression

 $(":input").each(function() {
    complete = complete && $(this).val() !== ""; //If val is empty, the whole expression  after the iteration will evaluate to false
 });

 if(complete) {
   $("#showlink").show();
 }
});

Answer 2

这应该可以解决问题：

// check for the change of any input in the form
$('#form_id :input').change(function(e) {

    // if any of the values are blank hide the link
    if ($('#form_id :input').map(function(idx, elem) {
            if ($(elem).val() === "") return $(elem);
        }).size() > 0)
        $("#showlink").hide();
    else
        $("#showlink").show();
});

您的代码的问题在于它将更改处理程序附加到整个表单而不是输入;我甚至不确定这有什么影响。您还使用each函数迭代整个文档中的所有输入，而不仅仅是表单，并且将根据它们的值显示和隐藏每个链接的链接，因此最终链接将是仅基于迭代中检查的最后一个值可见或隐藏。

Answer 3

if($(this).val().indexOf(""))

或

if($(this).val.indexOf(""))

尝试使用indexOf查看用户是否输入了某些内容

Answer 4

除了@asymptoticFault的答案之外的其他变体 - 如果链接应该被隐藏，请使用变量来保存：

$('form#form_id' ).change(function(e) {
  var should_hide = false;
  $(":input").each(function() {
    if($(this).val() === ""){
      should_hide = true;
      return false; // do not process each any more
    }
  });
  if (should_hide) {
    $("#showlink").hide();
  } else {
    $("#showlink").show();
  }
});

Answer 5

你可以做到这一点：

var $allInputs = $("input:text"),
    $button = $("#btnSubmit").hide();

$allInputs.change(function(){
    var isEmpty = $allInputs.filter(function(){
                  return ($(this).val()=="");
              });
    $button.hide();
    if(isEmpty.length == 0){
        $button.show();
    }
});

在这里工作小提琴：http://jsfiddle.net/QwvtL/4/

填写所有输入字段时显示链接

5 个答案: