Question

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

以下是新表单上的代码：

<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

您的rules可能如下：

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

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

有关required的详细信息，请参阅http://jqueryvalidation.org/required-method/

我希望这对你有所帮助

代码未经过测试

Answer 2

以下是我最终使用的最终代码：

<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>

编辑上的文件上载字段的jQuery验证

2 个答案: