How to show field error inline in the form?

问题

I defined a case class and a form object to handle form submission.

case class NewUser(
  userName: String,
  password: String,
  email: String  
)

val form = Form(
  mapping(
    "userName" -> nonEmptyText.verifying("The username already exists", User.userNameExists(_) == false),
    "password" -> tuple(
    "main" -> nonEmptyText,
    "confirm" -> nonEmptyText
  ).verifying(
    "Password does not match confirmed password", password => password._1 == password._2
  ).transform[String](
    password => password._1,
    password => ("", "")
  ),
  "email" -> email.verifying("This email belongs to an existing account. Please try another one", emailExists(_) == false))
  (NewUser.apply)(NewUser.unapply)
)

In the template, the code as blow:

@helper.inputText(newUserForm("userName"), 'class -> "form-control", 'required -> "true")
@helper.inputPassword(newUserForm("password.main"), 'class -> "form-control", 'required -> "true")
@helper.inputPassword(newUserForm("password.confirm"), 'class -> "form-control", 'required -> "true")
@helper.inputText(newUserForm("email"), 'class -> "form-control")

If the user types an existing userName, the error will be displayed inline. However, if the user types confirm password different from password, the error is not displayed anywhere.

How to display the error inline? Could anyone help with this? Thanks.

来源：https://stackoverflow.com/questions/36259403/how-to-show-field-error-inline-in-the-form