【问题标题】:jQuery make sure all form fields are filledjQuery确保所有表单字段都已填写
【发布时间】:2013-09-25 06:38:38
【问题描述】:

我有一个简单的表单,我正在为其进行客户端验证。 要进行验证,所有字段都不应留空。 这就是我的做法:

function validateForm() {
  $('.form-field').each(function() {
    if ( $(this).val() === '' ) {
      return false
    }
    else {
      return true;
    }
  });
}

由于某种原因,我的函数总是返回 false,即使所有字段都已填满。

【问题讨论】:

  • 你的函数没有返回任何东西。每个都为每个 .form-field 元素调用内部函数。 validateForm 从不返回值。
  • 我感觉就是这样。谢谢!

标签: javascript jquery forms validation


【解决方案1】:

您不能在匿名函数中返回 false。此外,如果它确实有效,如果您的第一个字段为空,您将返回 false,否则返回 true,并完全忽略其余字段。可能有更优雅的解决方案,但您可以这样做:

function validateForm() {
  var isValid = true;
  $('.form-field').each(function() {
    if ( $(this).val() === '' )
        isValid = false;
  });
  return isValid;
}

另一个建议:这要求您使用该表单域类来装饰所有表单域。您可能对使用不同的选择器进行过滤感兴趣,例如$('form.validated-form input[type="text"]')

编辑啊,我被打败了,但我的解释仍然有效,希望对您有所帮助。

【讨论】:

  • 是的,非常有帮助,谢谢!我知道我在退货方面做得不对。对 $('form input[type="text"]') 的好建议也非常感谢,它更干净。
  • 哦,开枪,你会想在你的表单上放一个类名,否则你会验证屏幕上的每个表单!
  • 或 $('form.validated-form :input') 来捕获文本字段。
  • $(':required') 是更优雅的方法,实际上尊重根据需要在语义上定义的任何元素
【解决方案2】:

你是从内部函数而不是 validate 方法返回的

试试

function validateForm() {
    var valid = true;
    $('.form-field').each(function () {
        if ($(this).val() === '') {
            valid = false;
            return false;
        }
    });
    return valid
}

【讨论】:

    【解决方案3】:
    function validateForm() {
        var invalid= 0;
        $('.form-field').each(function () {
            if ($(this).val() == '') {
                invalid++;
            }
        });
    
       if(invalid>0)
           return false;
       else
           return true;
    }
    

    【讨论】:

      【解决方案4】:

      这是一个类似的方法:

      function validateForm() {
        var valid = true;
        $('.form-field').each(function() {
          valid &= !!$(this).val();
        });
        return valid;
      }
      

      !! 只是将输入值转换为布尔值

      【讨论】: