Silverstripe - Form with custom template shows wrong validation errors - validation

Question

I have the following custom form
$list = DataObject::get('AreaOfExpertise');
foreach ($list as $l) {
$source[$l->ID] = $l->Name;
}
$fields = new FieldSet(
new TextField('Customer'),
new TextField('ProjectName'),
new DateField('WinDate'),
new TextareaField('Details'),
new OptionsetField('AreaOfExpertiseID', 'Area Of Expertise', $source),
new TextField('ProjectValueLength'),
new TextField('DeliverTimeframe'),
new TextField('ProjectTeam'),
new TextField('Contact')
);
$actions = new FieldSet(
new FormAction('doSubmit', 'Submit')
);
$requiredFields = array(
'Customer',
'ProjectName',
'WinDate',
'Details',
'AreaOfExpertiseID',
'ProjectValueLength',
'DeliverTimeframe',
'ProjectTeam',
'Contact',
);
$validator = new RequiredFields($requiredFields);
$form = new Form($this, 'SubmissionForm', $fields, $actions, $validator);
$form->setTemplate('Forms/NewWinForm');
return $form;
and my template for this form is
<form $FormAttributes>
<% if Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>
<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
<% end_if %>
<fieldset id="formContainer" class="clearfix NewWinForm">
<div id="Customer" class="row field text">
<label class="left" for="{$FormName}_Customer">Customer</label>
<div class="middleColumn">$dataFieldByName(Customer)</div>
</div>
<div id="ProjectName" class="row field text">
<label class="left" for="{$FormName}_ProjectName">Project name</label>
<div class="middleColumn">$dataFieldByName(ProjectName)</div>
</div>
<div id="WinDate" class="row field text">
<label class="left" for="{$FormName}_WinDate">Win date</label>
<div class="middleColumn">$dataFieldByName(WinDate)</div>
</div>
<div id="AreaOfExpertiseID" class="row field text">
<label class="left" for="{$FormName}_AreaOfExpertiseID">Area of expertise</label>
<div class="middleColumn">$dataFieldByName(AreaOfExpertiseID)</div>
</div>
<div id="Details" class="row field textarea">
<label class="left" for="{$FormName}_Details">Project details</label>
<div class="middleColumn">$dataFieldByName(Details)</div>
</div>
<div id="ProjectValueLength" class="row field text">
<label class="left" for="{$FormName}_ProjectValueLength">Project value/length</label>
<div class="middleColumn">$dataFieldByName(ProjectValueLength)</div>
</div>
<div id="DeliverTimeframe" class="row field text">
<label class="left" for="{$FormName}_DeliverTimeframe">Delivery timeframe</label>
<div class="middleColumn">$dataFieldByName(DeliverTimeframe)</div>
</div>
<div id="ProjectTeam" class="row field text">
<label class="left" for="{$FormName}_ProjectTeam">Project team</label>
<div class="middleColumn">$dataFieldByName(ProjectTeam)</div>
</div>
<div id="Contact" class="row field text">
<label class="left" for="{$FormName}_Contact">Contact</label>
<div class="middleColumn">$dataFieldByName(Contact)</div>
</div>
</fieldset>
<div class="Actions">
<% if Actions %>
<% control Actions %>$Field<% end_control %>
<% end_if %>
</div>
</form>
When I submit the form, instead of "Please fill out "Customer", it is required." message I get "Please fill out "this", it is required."
This is happening for all fields apart from Details field!
Can someone please tell me what I am doing wrong? It's killing me...

Answer 1

Ok, after some digging in sapphire/javascript/Validator.js, I found that the first class of the wrapper div must be field so I replaced this
<div id="Customer" class="row field text"> with <div id="Customer" class="field text row"> and everything works just fine.

Answer 2

This should be done by creating a form class and implementing the "forTemplate()" function. See SilverStripe Forms.
Also, instead of creating the "AreaOfExpertise" source array the way you have, there's a convenience method, toDropDownMap(), that does this for you.
$source = $list->toDropDownMap('ID', 'Name');
Hope this helps.