TextArea value set by JQuery causing Model.IsValid to be false

Question

I have a file browser and a TextArea in the same Kendo Grid cell. The user clicks the file browser, selects the file, and using JQuery, I set the value in the textarea to be the file path selected. This textarea is bound to the model which will then be sent back to the controller and written to the database when saved. I have everything working as expected, except when I click save, and the code hits the breakpoint I set in the controller, the Model.IsValid value is false which causes nothing to write to the database.

If I click into the TextArea and type some more text after selecting the file, then save, everything works just fine. For some reason, if I try to save with just using the file browser and filling out all other required fields and never actually clicking into the TextArea, the Model is invalid and nothing is written. See code below:

View (the field in question is 'BackupLocation'):

@(Html.Kendo().Grid<FooModel>()
      .Name("gFoo")
      .Columns(columns =>
         {
             columns.Command(command => { command.Edit(); command.Destroy(); });
             columns.Bound(x => x.Type).EditorTemplateName("TypeTemplate");
             columns.Bound(x => x.RequestedBy).Title("Requested By");
             columns.Bound(x => x.BackupLocation).Title("Backup Location").EditorTemplateName("FileBrowserSelect");
             //...Other columns
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(50)
              .Model(model =>
                {
                   //Model info
                })
                 .Create(create => create.Action("InsertFoo", "Foo"))
                  // Read Update Delete follow
       )
 )

Editor Template:

@Html.TextAreaFor(m => m, new {@id = "BackupLocation", @class = "k-textbox", @rows = 10, style = "Width:100%; overflow:hidden;"});
@(Html.Kendo().Upload()
     .Name("LocationSelector")
     .Multiple(false)
     .ShowFileList(false)
     .Events(events => events.Select("onSelect");
)

JavaScript onSelect function:

function onSelect(e){
      var l = $("LocationSelector").val();
      var s = $("BackupLocation");
      s.val(l);
}

Controller Method:

public ActionResult InsertFoo([DataSourceRequest] DataSourceRequest request, FooModel fooModel)
{
   if(fooModel != null && ModelState.IsValid)  //this is where I leave my breakpoint.  ModelState.IsValid is false so the rest of the code is skipped
   {
       //skipped code
   }
}

I have redacted a lot of the irrelevant code for the sake of time (I can't copy and paste from the machine I'm doing the work on) but I think this gets the idea across.

Any help is greatly appreciated!

UPDATE This is the model that I'm using, forgot to include that

public class FooModel
{
   public int ID {get; set;}

   [Required(ErrorMessage = "Please Select a Type")]
   public string Type {get; set;}

   [Required(ErrorMessage = "Please Select a Requestor")]
   public string RequestedBy {get; set;}

   [Required(ErrorMessage = "Please provide file location")]
   public string BackupLocation {get; set;}

   //...Other fields
}