Validation works too well with jQuery-Uploader

Question

I'm trying to use the jQuery-Uploader (multi-file uploader). I don't think my problem is related to the uploader itself; it's probably just a lack of JS experience problem. :) Given this code:

    $('#fileupload').bind('fileuploadsubmit', function (e, data) {
        var inputs = data.context.find(':input');

        data.formData = inputs.serializeArray();

        if (!data.formData.title) {
            alert("Needs a title, yo!");
            data.context.find('button').prop('disabled', false);
            return false;
        };

        data.formData.push({name:'formData',value:JSON.stringify(data.formData)});

    });

I'm trying to validate the "title" field so that the user has to input a title for the file(s) they're uploading. The code snippet was included in the Blueimp website, except I changed "example" to "title"

It finds the missing title and gives the alert just fine. The problem is that even after you input a title, it still insists there isn't one. Basically, it always thinks title is blank.

I tried changing the validation to a jQuery variation where I look at $('.title').val().length but the same thing applies. It just keeps firing no matter what.

This is the HTML element for title:

<label>Title: <input name="title" class="song_title title" size="40" maxlength="100" value=""></label>

So... I'm not really sure what to do. I've written plenty of validations in the past that have worked just fine. But with regular web pages, not ajax uploaders. :)

What am I doing wrong?

Thanks!

Answer 1

 if (!data.formData.title) {

It checks only if title is undefined or not. Most time, this node is defined. Validate example:

 var title = data.formData.title;

 // is the title length <= 0 or over 255
 if(title.length <= 0 || title.length > 255) {
      alert("Needs a title, yo!");
      data.context.find('button').prop('disabled', false);
      return false;
 };