1

OK, bear with me as this thing is fairly complicated not only to explain - We are trying to provide "friendlier" client-side validation for file uploads, ensuring that any illegal characters are not present in files they are attempting to upload (yes, we do server-side validation as well, but would like to allow the user to fix any illegal characters in files BEFORE attempting to upload).

We are also using Bootstrap 2.1.0, and Jasny's File Input styling for Bootstrap. We have a RegEx for jQuery Validate working fine for regular inputs, but in this case, the validation is triggering whether there is an illegal character in the filename or not, and the validation messages are not clearing properly, etc.

Here is a link to a Fiddle to illustrate it better: http://jsfiddle.net/4fu5S/2/

Here is the JS for the additional method:

$.validator.addMethod(
"regexdoc",
function (value, element) {
    return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value));
},
"Document Names Cannot Contain Characters /, :, ?, \\, *, |, [, ], <, ', ^, #, &, or >.");

And here's the JS for the Validate:

$("#frmUpload")
.validate({
    debug: true,
    errorPlacement: function (error, element) {
        element.closest('.control-group')
            .find('.help-block')
            .html(error.text());
    },
    highlight: function (element, errorClass, validClass) {
        $(element)
            .closest('.control-group')
            .removeClass('success')
            .addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element)
            .closest('.control-group')
            .removeClass('error')
            .addClass('success');
    },
    success: function (label) {
        $(label)
            .closest('form')
            .find('.valid')
            .removeClass("invalid");
    },
    rules: {
        uploadFile1: {
            required: true,
            minlength: 4,
            regexdoc: true
        },
        renameUploadDoc1: {
            required: true,
            minlength: 4,
            maxlength: 45,
            regexdoc: true
        }
    }
});

To reproduce the problem I'm having, please attempt the following (IE9+ or Chrome 33+):

  1. First, choose a file by clicking the "Select Document" button. Ideally, choose a file that does NOT contain illegal characters (to show the validation triggers even though it should not). Notice the validation triggers even though your file should NOT meet the critera to trigger the error message, even though the message shows regardless.

  2. Oddly enough, the second field (which gets automatically populated with the filename from the file input) is highlighted in green, meaning the validation DOES work for that field. If you choose a file that does contain an illegal character, as soon as you tab out of field or move focus, it will trigger the validation, letting you know it is incorrect.

NOTE: the filename should be showing up after choosing a file to upload, and it does with Jasny Boostrap 2.1.1, but 2.3.0 was the lowest version we could find on CDN to link to - I don't think that makes a difference here since it (the validation) doesn't work with 2.1.1 OR 2.3.0 regardless of the filename issue.

What is odd is it seems to work fine in Firefox 27, but Chrome 33 and IE9+ seem to exhibit the same issues. Any ideas about how to troubleshoot this are greatly appreciated.

Joyrex
  • 1,103
  • 14
  • 24
  • 1
    Please do not bypass the posting rules. Include the code in your OP... others have managed to figure it out. – Sparky Mar 13 '14 at 18:42
  • 2
    You also need to take the time, on your end, to construct the most _concise_ example possible that still demonstrates the problem. Don't expect others to do this for you. See http://sscce.org for posting guidelines. – Sparky Mar 13 '14 at 18:50
  • Sparky - Done and done - sorry! Hopefully the steps included to reproduce the problem as well providing the JS code (I broke it into two parts and it managed to insert without issue) will help in determining what the issue is here. Thanks for the advice! – Joyrex Mar 15 '14 at 16:31
  • I voted to reopen the question. You can also flag it to ask a moderator to reopen it for you. – Sparky Mar 15 '14 at 16:39

2 Answers2

0

I think that I've fixed the problem, please, check my code.

http://jsfiddle.net/4fu5S/5/

The problem is the file upload field, some browsers add the string "c:\fakepath\" for security reasons, that path is ignored when the upload is performed, but is used as field value. If you want to verify the file name you need to check if that path is added and remove it in your validator function.

function (value, element) {
    if (value.indexOf('C:\\fakepath\\') === 0)
        value = value.substring('C:\\fakepath\\'.length)

    return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value));
},

In this post is explained how the "fakepath" works: https://stackoverflow.com/a/18254337/661140

Community
  • 1
  • 1
Roberto
  • 8,586
  • 3
  • 42
  • 53
  • Awesome! Works beautifully, and I learned a lot (never knew about the "fakepath" thing). Thank you for the concise answer, additional info, and best of all, a solution! – Joyrex Mar 20 '14 at 21:29
0

Roberto is right: the problem is the fakepath.

But I would change your code to this (based on your code to get the file name of fileUpload1 onChange):

function (value, element) {
    return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value.split('\\').pop()));
},
    "Document Names Cannot Contain Characters /, :, ?, \\, *, |, [, ], <, ', ^, #, &, or >.");
Denis Ali
  • 1,062
  • 7
  • 8
  • This solution is not valid for files with the character "\" in the name, In Linux or OSX you can create a file with the name: "test\test.txt". The validator function will return the file as valid. – Roberto Mar 20 '14 at 19:57