jquery - 遍历表单提交中的每个“必填”字段

Question

我在这里遇到了真正的麻烦。我不能用我的大脑来解决这个问题！

我想要做的是在验证电子邮件地址后提交一个表单，然后每个输入都标有“必需”类。我非常感谢有人向我展示如何循环浏览这些内容，并且只有在每个都填写的情况下才提交。

<script type="text/javascript">
    $(document).ready(function() {
        $('.button').click(function() {
            var email = $("input.email").val();        
            var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            if(filter.test(email)) {
                $('input.required').each(function() {
                    var name = $("input.required").val();
                    if(name != "") {
                        $('#form').submit();
                    } else {
                        $('#error').show();
                        return false;
                    }
                });
            } 
            else {
                $('#error').show();
                return false;
            }
        });
    });
</script>

Answer 1

您可以使用.filter()仅过滤掉空的元素，然后检查与过滤器匹配的元素的数量。如果任何输入与过滤器匹配，则您有错误并且不应发布它。像这样的东西：

var emptyFields = $('input.required').filter(function() {
    return $(this).val() === "";
}).length;

if (emptyFields === 0) {
   $('#form').submit();
} else {
   $('#error').show();
   return false;
}

Answer 2

    var isValid = true;  // Set the isValid to flag try initially

    $('input.required').each(function() {   // Loop thru all the elements
        var name = $("input.required").val();
        if(name != "") {  // If not empty do nothing

        } else {          
            isValid = false; // If one loop is empty set the isValid flag to false
            return false;    // Break out of .each loop 
        }
    });

    if(isValid){    // If valid submit form else show error
      $('#form').submit();
    }
    else{
       $('#error').show();
    return false;
}