Question

例如，我正在使用下面的脚本来检查空字段：

$('a.submit').click(function() {
 if ($('.LoginData').val() == "")  {
  $('input:text[value=""]').attr('style', 'border-color:#FF0000;');
 } else {
  $(this).parents('form').submit();
 }
});

所有输入元素都有LoginData类，所以我使用了jQuery类选择器，它选择了包含该类的所有元素。但是，当if条件找到一个非空白字段时，它就会停在那里。

我认为这是if语句的正常行为，还有其他替代方法吗？

感谢。

Answer 1

“。val（）”只有一个返回值 - 它只能给你一个元素的值;那个将是$（）集合的第一个元素。

$('a.submit').click(function() 
{
  var ok = true;
   $('.LoginData').each(function() 
   {  
       if($(this).val() == "")  
       { 
              $(this).attr('style', 'border-color:#FF0000;'); 
              ok = false;
       }
   }
   if (ok)
   {
      $(this).parents('form').submit(); 
   } 
});

Answer 2

您的代码目前仅查看第一个元素。您需要将.each()与支票结合使用，以确保其按计划进行。

如果字段不为空，那么您当前状态的循环将立即提交表单。

Answer 3

val()只返回第一个匹配元素的值，因此您无法使用它来验证表单是否已填写。

您需要使用jQuery.each()方法对'.loginData'项进行迭代。

一个好的解决方案是使用each方法，将类附加到空的元素（类似validate-empty）。这可以用于将样式附加到一个元素，该元素向用户显示它是必需的（就像你在上面做的那样，但是有一个已定义的类）。然后，您可以检查表单，例如$('#my-form .validate-empty').size() == 0，以便在提交之前查看是否有错误。

Answer 4

您需要使用each()

Answer 5

我注意到这在Chrome中不起作用（它总是提交表单），所以你需要添加：

  event.preventDefault();

像这样：

$('a.submit').click(function() 
{
  event.preventDefault();
  var ok = true;
   $('.LoginData').each(function() 
   {  
       if($(this).val() == "")  
       { 
              $(this).attr('style', 'border-color:#FF0000;'); 
              ok = false;
       }
   }
   if (ok)
   {
      $(this).parents('form').submit(); 
   } 
});

Answer 6

为什么要使用.click()开头？如果您想使用jQuery提交表单，我建议您使用.submit()（有关.submit()的更多信息，请阅读jQuery文档）。正如其他用户所说，您可以使用.each()函数迭代所有输入字段。我将如何做到这一点：

$("#form").submit(function(event){
        $(".classForAllInput").each(function(index) {
          if ($(this).val() == 0) {
              $("#error").css({"display": "inline"}).text("Some of the fields are empty");
              event.preventDefault();
          }
        });
    });

jQuery函数.each()将遍历所有输入字段，如果其中任何一个为空，则会显示错误消息（假设您有一个区域显示错误ID）。

Answer 7

这是另一种方法。此外，表单不会在chrome上提交，因此它不会像SomeoneS所描述的那样表现出来，而且没有立即使用prevent.default。

<script type="text/javascript">
    $('#ctl00_PlaceHolderMain_changeRequestbtnSave').click(function (e) {
        var valid = true;
        //check all inputs within a parent div)
        $('.requiredfield input').each(function () {
            //check if values is null
            if ($(this).val() == "") {
                $(this).addClass('requiredflag');
                valid = false;
            }
        })
        if(!valid) {
            e.preventDefault();
        }
    });
</script>

请记住，如果您不使用document.ready

，则需要在html的最底部

我的风格如下：

<style>
.requiredflag {
    border: 1px solid red;
}
.requiredfield:after {
    content: "*";
    font-weight: bold;
    color: red;
}
</style>

jQuery检查空字段不检查所有字段

7 个答案: