title: How to show field error inline in the form?
body: <p>I defined a case class and a form object to handle form submission. </p>
  
  <pre><code>case class NewUser(
    userName: String,
    password: String,
    email: String  
  )
  
  val form = Form(
    mapping(
      "userName" -&gt; nonEmptyText.verifying("The username already exists", User.userNameExists(_) == false),
      "password" -&gt; tuple(
      "main" -&gt; nonEmptyText,
      "confirm" -&gt; nonEmptyText
    ).verifying(
      "Password does not match confirmed password", password =&gt; password._1 == password._2
    ).transform[String](
      password =&gt; password._1,
      password =&gt; ("", "")
    ),
    "email" -&gt; email.verifying("This email belongs to an existing account. Please try another one", emailExists(_) == false))
    (NewUser.apply)(NewUser.unapply)
  )
  </code></pre>
  
  <p>In the template, the code as blow:</p>
  
  <pre><code>@helper.inputText(newUserForm("userName"), 'class -&gt; "form-control", 'required -&gt; "true")
  @helper.inputPassword(newUserForm("password.main"), 'class -&gt; "form-control", 'required -&gt; "true")
  @helper.inputPassword(newUserForm("password.confirm"), 'class -&gt; "form-control", 'required -&gt; "true")
  @helper.inputText(newUserForm("email"), 'class -&gt; "form-control")
  </code></pre>
  
  <p>If the user types an existing userName, the error will be displayed inline. However, if the user types <code>confirm password</code> different from <code>password</code>, the error is not displayed anywhere.</p>
  
  <p>How to display the error inline? Could anyone help with this? Thanks.  </p>