Question

我有一个包含许多输入框的表单。我想创建一个函数，它将遍历每个框并确定任何框是0还是空。

用户只需填写一个输入框。如果他们填满所有这些，那也没关系。但一个是最低要求。否则会出现错误提示。

<form method="POST" onsubmit="return checkInputs()" name="inputData" id="inputData">

  Socks <input class="text-center" value="0" type="text" id="socks" name="socks">

  Underwear <input class="text-center" value="0" type="text" id="underwear" name="underwear">

  Ties <input class="text-center" value="0" type="text" id="ties" name="ties">

  Pants <input class="text-center" value="0" type="text" id="pants" name="pants">


  <a href="#" onClick="checkInputs()"> Save</a>

</form>

我的JS

function checkInputs() {

    var flag=0;

    $("form#inputData :input[type=text]").each(function(){
        var input = $(this); 
        if(input.val() > 0) {
          // all good
        } else { 
            flag=1; 
        }
    });

    if(flag==1){
        alert('Error!');
    } else {
        alert('Thanks!');
    }

}

我的codePen是http://codepen.io/anon/pen/mPmoma

Answer 1

尝试这样的事情：

function checkInputs() {

    var flag=0;
  var result = new Array();

    $("form#inputData :input[type=text]").each(function(){
        var input = $(this); 
        if(input.val() > 0 && input.val() !== '' ) {
            result.push(input.val());
        } 
    });

    if(result.length > 0){
        alert('thanks')
    } else {
        alert('error!'); 
    }

}

Answer 2

对于更简单的代码，您还可以使用jquery选择器：

$('input[type=text]:not([value=""],[value=0])')

*编辑：带条件：

var len = $('input[type=text]:not([value=""],[value=0])').length;
if(len>0) alert('thanks');
else alert('error!');

Answer 3

正如其他答案所指出的，设计中的关键缺陷是$('.alert-danger')的每次迭代都会修改function checkInputs() { $('.alert-danger').show(); $("form#inputData :input[type=text]").each(function() { var input = $(this); if (parseInt(input.val(), 10) > 0) { $('.alert-danger').hide(); return false; } }); if($('.alert-danger').is(':visible')) { alert("Danger!"); } else { alert("Thanks!"); } }。以下是一个可能的解决方案，其解释如下：

＆＃13;

body {
  padding: 0;
  margin: 0;
}
.alert-danger {
  color: #a94442;
  background: #f2dede;
  border-bottom: 1px solid #ebccd1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" onsubmit="return checkInputs()" name="inputData" id="inputData">

<div style="display:none" class="alert-danger">You need enter at least 1 quantity for any or all of these choices. 
</div>


  <br /><br />
  <input class="text-center" value="0" type="text" id="socks" name="socks"><br />
  <input class="text-center" value="0" type="text" id="underwear" name="underwear"><br />
  <input class="text-center" value="0" type="text" id="ties" name="ties"><br />
  <input class="text-center" value="0" type="text" id="ties" name="ties"><br />
  <br /><br />
  <a href="#" onClick="checkInputs()"> Save</a>

</form>

＆＃13;

flag

＆＃13;

您将注意到上述代码示例中的一些更改，而不是您提供的代码示例。首先，我删除了.show()变量。通过在适当的时间致电.hide()和.alert-danger，我们可以利用parseInt(input.val(), 10)的可见性状态作为关键，以确定我们是否显示错误或隐藏错误。

第二个更改是我们在检查值是否大于0之前使用parseInt()解析输入框值。通过使用"a"提供的类型转换属性，我们可以过滤掉不相关的内容。例如，字母parseInt("a", 10) = NaN将不会验证为合法值，因为它是NaN > 0和return false;以来的非数字值。

最后，由于您注意到只有一个值必须设置为验证才能接受输入，因此我已将.each()添加到bin/kafka-console-consumer.sh --zookeeper localhost:2181 --topic test --from-beginning循环中。使用此行，只要一个值正确验证，循环就会短路。

Answer 4

其他人已明确解释了第一个问题 - 迭代。

第二个问题。您正在使用链接触发该功能。不要忘记链接的默认操作是跟随链接，即使它是在您的情况下的同一页面或'#'，这可能导致页面重新加载。使用event.preventDefault();来阻止默认操作。

第三，alert()函数不是一个好的调试工具。一旦您在警报上单击“确定”并且页面重置，页面就会刷新。

＆＃13;

$('.save').on('click', function(e) {
  e.preventDefault()
  var ok = $(this).closest('form').find(':text.text-center').filter(function() {
    return $(this).val() > 0;
  });
  if( ok.length ) {
    $('.alert-danger').slideUp();
    $('.out').text('Thanks!');
  } else {
    $('.alert-danger').slideDown();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="inputData" id="inputData">

<div style="display:none" class="alert-danger">You need enter at least 1 quantity for any or all of these choices. 
</div>


  <br /><br />
  <input class="text-center" value="0" type="text" id="socks" name="socks"><br />
  <input class="text-center" value="0" type="text" id="underwear" name="underwear"><br />
  <input class="text-center" value="0" type="text" id="ties" name="ties"><br />
  <input class="text-center" value="0" type="text" id="ties" name="ties"><br />
  <br /><br />
  <a href="#" class="save"> Save</a>
  
  <div class="out"></div>

</form>

＆＃13;

如何检查所有输入框是否为空或等于0？

4 个答案: