MVC data validation for listboxfor not working - asp.net-mvc

Question

I am having a bit of trouble with my form being validated even if my listboxfor is empty. This is the viewmodel im using:
public class CopyExcelReportSearchViewModel: IViewModel
{
[Required]
public DateRange DateRange { get; set; }
[Required]
public Guid CustomerId { get; set; }
[Required]
public List<Guid> ProjectIds { get; set; }
[Required]
public List<Guid> LocationsIds { get; set; }
public List<Customer> AvailableCustomers { get; set; }
public List<Project> AvailableProjects { get; set; }
public List<Location> AvailableLocations { get; set; }
public CopyExcelReportSearchViewModel()
{
ProjectIds = new List<Guid>();
LocationsIds = new List<Guid>();
AvailableCustomers = new List<Customer>();
AvailableProjects = new List<Project>();
AvailableLocations = new List<Location>();
}
}
Here is the html
#model Path.CopyExcelReportSearchViewModel
#{
var customerDropdown = Model.AvailableCustomers.Select(x => new SelectListItem
{
Text = x.Name,
Value = x.Id.ToString(),
Selected = Model.CustomerId == x.Id
});
var locationDropdown = Model.AvailableLocations.Select(x => new SelectListItem
{
Text = x.Name,
Value = x.Id.ToString(),
Selected = Model.LocationsIds.Any(y => y == x.Id)
});
var projectDropdown = Model.AvailableProjects.Select(x => new SelectListItem
{
Text = x.Name,
Value = x.Id.ToString(),
Selected = Model.ProjectIds.Any(y => y == x.Id)
});
}
<script>
var optionTemplate = [
'<option value="[VALUE]">[TEXT]</option>'
].join();
$(function () {
$('#CustomerId').change(function () {
var value = $(this).val();
$.ajax({
url: '#Url.Action("GetProjectsByCustomerId")?customerId=' + value,
datatype: 'json',
type: 'GET',
cache: false,
success: function (data) {
var projectSelect = $('#ProjectIds');
var options = '';
for (var i = 0; i < data.length; i++) {
options += optionTemplate.replace('[VALUE]', data[i].id).replace('[TEXT]', data[i].name);
}
projectSelect.empty().append(options).removeAttr('disabled').trigger('chosen:updated');
}
});
});
$('#CustomerId').trigger('change');
});
</script>
#using (Html.BeginForm("GenerateCopyReportExcel", "Report", FormMethod.Post))
{
//todo - Fix projectids validation
<div id="DlgStockReportSearch" class="modal fade" data-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#Language.KPIReport</h3>
</div>
<div class="modal-body clearfix">
<div class="col-xs-12">
<div class="form-group">
<label for="CustomerId">#Language.Customer</label>
#Html.DropDownListFor(x => x.CustomerId, customerDropdown, new { #class = "form-control chosen", placeholder = Language.Customer })
#Html.ValidationMessageFor(x => x.CustomerId)
</div>
<div class="form-group required">
<label for="DateRange">#Language.Date</label>
#Html.EditorFor(x => x.DateRange)
</div>
<div class="form-group">
<label for="ProjectIds">#Language.Projects</label>
<div class="input-group button">
#Html.ListBoxFor(x => x.ProjectIds, projectDropdown, new { #class = "form-control chosen", multiple = ""})
#Html.ValidationMessageFor(m => m.ProjectIds)
<span class="input-group-addon">
<button type="button" class="btn btn-default chosen-select-all">Select all</button>
</span>
</div>
</div>
<div class="form-group">
<label for="LocationsIds">#Language.Location</label>
<div class="input-group button">
#Html.ListBoxFor(x => x.LocationsIds, locationDropdown, new { #class = "form-control chosen", multiple = "" })
<span class="input-group-addon">
<button type="button" class="btn btn-default chosen-select-all">Select all</button>
</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">#Language.Close</button>
<button type="submit" class="btn btn-primary">
#Language.GenerateReport
</button>
</div>
</div>
</div>
</div>
}
For some reason, I am able to submit the form even if i leave the listboxfor for projects and locations empty.