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

I am trying to validate a file upload field in a form using jQuery Validation Plugin. I only need to check if the file was uploaded, not if the file was a certain size and/or type. Everything works fine on the original submission, the issue is the form is submitted to a database and allowed to be edited later. When editing the form I have setup an additional hidden field with _orig appended to the end. So for a field called check_upload there is a field called check_upload_orig which will contain the previous submission data. That way a user does not have to re-upload a file each time. So I am not sure how to write a method to check if the 'check_upload_orig' field has a value when the check_upload field is empty. There are multiple file upload fields in this particular form. Some are required and some are not. Any suggestions?

Here is the code on a new form:

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

Here is the code for editing the form. The only difference is the check_upload_orig field contains a value from the previous submission. So if that value is set then the field should not be required to have a new file uploaded.

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

Your rules could look like:

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

This means check_upload is just required, if check_upload_orig is blank. The :blank-pseudoselector is a custom selector of jQuery-Validation (see: http://jqueryvalidation.org/blank-selector/).

For more info on required-functions see http://jqueryvalidation.org/required-method/

I hope this helps you a bit

the code is not tested

Here is the final code I ended up using:

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