编辑时文件上传字段的 jQuery 验证

Question

我正在尝试使用 jQuery 验证插件验证表单中的文件上传字段。我只需要检查文件是否已上传，而不是文件是否具有特定大小和/或类型。原始提交一切正常，问题是表单已提交到数据库并允许稍后进行编辑。编辑表单时，我设置了一个附加隐藏字段，并在末尾附加了_orig。因此，对于名为check_upload 的字段，有一个名为check_upload_orig 的字段将包含以前的提交数据。这样用户就不必每次都重新上传文件。所以我不确定当check_upload 字段为空时如何编写一个方法来检查'check_upload_orig' 字段是否有值。此特定表单中有多个文件上传字段。有些是必需的，有些不是。有什么建议？

这是新表单上的代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("#modify").validate({
            onkeyup: function(element){ $(element).valid(); },
            onfocusout: function(element){ $(element).valid(); },
            rules: {
            },
            highlight: function(element, errorClass, validclass) {
                // if the element is a checkbox, highlight the entire group
                if(element.type=='checkbox') {
                    $(element).parent('.ctrlHolder').addClass('error');
                } else {
                    $(element).addClass('error');
                }
            },
            unhighlight: function(element, errorClass, validclass) {
                if(element.type=='checkbox') {
                    $(element).parent('.ctrlHolder').removeClass('error');
                } else {
                    $(element).removeClass('error');
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    }); // end $(document).ready(function()
</script>

<form enctype="multipart/form-data" id="modify" name="modify" action="./" method="post">
    <input type="file" id="check_upload" name="check_upload" class=""  />
    <input type="hidden" id="check_upload_orig" name="check_upload_orig" value=""  />
    <input type="submit" />
</form>

这里是编辑表单的代码。唯一的区别是check_upload_orig field 包含上一次提交的值。因此，如果设置了该值，则不应要求该字段上传新文件。

<script type="text/javascript">
    $(document).ready(function(){
        $("#modify").validate({
            onkeyup: function(element){ $(element).valid(); },
            onfocusout: function(element){ $(element).valid(); },
            rules: {
            },
            highlight: function(element, errorClass, validclass) {
                // if the element is a checkbox, highlight the entire group
                if(element.type=='checkbox') {
                    $(element).parent('.ctrlHolder').addClass('error');
                } else {
                    $(element).addClass('error');
                }
            },
            unhighlight: function(element, errorClass, validclass) {
                if(element.type=='checkbox') {
                    $(element).parent('.ctrlHolder').removeClass('error');
                } else {
                    $(element).removeClass('error');
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    }); // end $(document).ready(function()
</script>

<form enctype="multipart/form-data" id="modify" name="modify" action="./" method="post">
    <input type="file" id="check_upload" name="check_upload" class=""  />
    <input type="hidden" id="check_upload_orig" name="check_upload_orig" value="32.jpg"  />
    <input type="submit" name="view_fa_php_submit" id="view_fa_php_submit" class="submit view_fa_php_submit" value="Continue" />
</form>

Answer 1

这是我最终使用的最终代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("#modify").validate({
            onkeyup: function(element){ $(element).valid(); },
            onfocusout: function(element){ $(element).valid(); },
            rules: {
                check_upload: {
                    required: {
                        depends: function(element) {
                            return $("#check_upload_orig").is(":blank");
                        }
                    },
                },
            },
            highlight: function(element, errorClass, validclass) {
                // if the element is a checkbox, highlight the entire group
                if(element.type=='checkbox') {
                    $(element).parent('.ctrlHolder').addClass('error');
                } else {
                    $(element).addClass('error');
                }
            },
            unhighlight: function(element, errorClass, validclass) {
                if(element.type=='checkbox') {
                    $(element).parent('.ctrlHolder').removeClass('error');
                } else {
                    $(element).removeClass('error');
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    }); // end $(document).ready(function()
</script>

<form enctype="multipart/form-data" id="modify" name="modify" action="./" method="post">
    <input type="file" id="check_upload" name="check_upload" class=""  />
    <input type="hidden" id="check_upload_orig" name="check_upload_orig" value="32.jpg"  />
    <input type="submit" name="view_fa_php_submit" id="view_fa_php_submit" class="submit view_fa_php_submit" value="Continue" />
</form>

Answer 2

您的 rules 可能如下所示：

rules: {
    check_upload: {
        required: '#check_upload_orig:blank'
    }
}

这意味着如果check_upload_orig 为空，则只需要check_upload。 :blank-pseudoselector 是 jQuery-Validation 的自定义选择器（参见：http://jqueryvalidation.org/blank-selector/）。

有关required-functions 的更多信息，请参阅http://jqueryvalidation.org/required-method/

希望对你有所帮助

代码未经测试