Form submission and validation - Custom Field Constructors

一个表单域的渲染并不仅仅需要包含 <input> 标签，还有 <label> 和其他一些标签可能被你的 CSS 框架用来装饰表单域。

所有的输入 helper 都会接受一个隐式（implicit）的 FieldConstructor 来处理这一部分。默认的构造器（在作用域内没有指定其他域构造器时会被调用），生成的 HTML 类似于：

<dl class="error" id="username_field">
    <dt><label for="username">Username:</label></dt>
    <dd><input type="text" name="username" id="username" value=""></dd>
    <dd class="error">This field is required!</dd>
    <dd class="error">Another error</dd>
    <dd class="info">Required</dd>
    <dd class="info">Another constraint</dd>
</dl>

这个默认的域构造器支持传入额外的选项到输入 helper：

'_label -> "Custom label"
'_id -> "idForTheTopDlElement"
'_help -> "Custom help"
'_showConstraints -> false
'_error -> "Force an error"
'_showErrors -> false

自定义域构造器

通常，你需要自定义域构造器。首先要写一个模板：

@(elements: helper.FieldElements)
<div class="@if(elements.hasErrors) {error}">
    <label for="@elements.id">@elements.label(elements.lang)</label>
    <div class="input">
        @elements.input
        <span class="errors">@elements.errors(elements.lang).mkString(", ")</span>
        <span class="help">@elements.infos(elements.lang).mkString(", ")</span>
    </div>
</div>

注意： 这只是一个例子。你想要实现多复杂的功能都可以。你同样还能使用 @elements.field 来获取原始的表单域。

现在使用模板函数来创建 FieldConstructor:

object MyHelpers {
  import views.html.helper.FieldConstructor
  implicit val myFields = FieldConstructor(html.myFieldConstructorTemplate.f)
}

还可以让表单 helper 来调用他，只需要将其导入到你的模板中：

@import MyHelpers._

@helper.inputText(myForm("username"))

模板会使用你的域构造器来渲染输入文本。

你也可以为 FieldConstructor 设置一个隐式（implicit）的值：

@implicitField = @{ helper.FieldConstructor(myFieldConstructorTemplate.f) }

@helper.inputText(myForm("username"))