在scala和Play框架中使用twitter bootstrap显示表单验证错误消息

Question

我想显示像这样的表单错误。使用twitter bootstrap。如果弹出错误，我想显示它与输入字段包围。

我试过但它不起作用，这是我的代码，我使用的是twitter-bootstrap 3.0，具体是什么用的？

@(productCreateForm: Form[Product])(implicit flash: Flash, lang: Lang)
@import play.api.Play.current
@import play.api.i18n.Messages.Implicits._
@import helper._
@import models._

@import scala.collection.mutable.ListBuffer


<link rel="stylesheet" href="@routes.Assets.at("stylesheets/bootstrap.css")">
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/main.css")">
        <!-- jQuery library -->
<script src="@routes.Assets.at("javascripts/jquery.min.js")"></script>
        <!-- Latest compiled JavaScript -->
<script src="@routes.Assets.at("javascripts/bootstrap.min.js")"></script>




@index(Messages("application.name")+" | Create Product") {


        @if(flash.get("success").isDefined){
                <div class="alert alert-success">

                     <strong>Success!</strong> @flash.get("success")
                </div>
            }

            @if(flash.get("error").isDefined){
                <div class="alert alert-error">

                     <strong>Error!</strong> @flash.get("error")
                </div>
            }








@helper.form(action = routes.Products.saveProduct(),'class -> "y",'id -> "form") {

    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                            Details
                        </a>
                    </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">

                    <div class="x">

                        @helper.inputText(productCreateForm("proname"),'_help -> "",'_label -> "Product Name",'_showConstraints -> false)
                        @helper.inputText(productCreateForm("proprice"),'_help -> "",'_label -> "Product Price",'_showConstraints -> false)
                        @helper.textarea(productCreateForm("prodes"),'_label -> "Product Description",'_showConstraints -> false)

                        @input(field=productCreateForm("probrands"),'_label -> "Product Brands") { (id, name, value, htmlArgs) =>


                            <select id="brandId" name="probrands" @toHtmlArgs(htmlArgs)>
                                options.map { v =>
                                    @for(b <- Brand.findAllBrands()){
                                        <option value=@b.id >@b.name</option>
                                    }
                                }
                            </select>
                        } 



                    </div>



                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        Pricing
                    </a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">

                content
                </div>
            </div>
        </div>
    </div>

 <input type="submit" id="logbut" class="btn btn-primary" value='Save'>

  }

}

控制器

package controllers
import play.api.mvc.{Action, Controller}
import play.api.data.Form
import play.api.data.Forms.{mapping, nonEmptyText}
import play.api.mvc.Flash
import play.api.Play.current
import play.api.i18n.Messages.Implicits._
import models.Product
import java.io.File

    object Products extends Controller {

         //Validations
        private val productCreateForm: Form[Product] = Form(
            mapping(

                "proname" -> nonEmptyText,
                "proprice" -> nonEmptyText,
                "prodes" -> nonEmptyText,
                "probrand" -> nonEmptyText,
                "protype" -> nonEmptyText,
                 "prosupplier" -> nonEmptyText,
                 "prosupcode" -> nonEmptyText,
                 "prosupprice"->nonEmptyText
                )(Product.apply)(Product.unapply)
        )



        //Save product to the DB
          def saveProduct = Action(parse.multipartFormData) { implicit request =>



              val newProductForm = productCreateForm.bindFromRequest()

                newProductForm.fold(

                    hasErrors = { form =>
                        Redirect(routes.Products.productc()).
                            flashing(Flash(form.data) + 
                                ("error" -> "Fill required fileds"))
                        },

                    success = { newProduct =>


                        //file upload
                        request.body.file("pic").map { picture =>
                            val videoFilename = picture.filename
                            val contentType = picture.contentType.get
                            picture.ref.moveTo(new File("D:/" + picture.filename))
                        }

                        Redirect(routes.Products.productc()).
                            flashing("success" ->"Product Saved!")
                    }
                )

        }



        //Product Form Load
        def productc = Action { implicit request => 


            request.session.get("mysession").map { user =>

                val form = if (request.flash.get("error").isDefined) 
                    productCreateForm.bind(request.flash.data) 
                else 
                    productCreateForm
                    Ok(views.html.product.create_new_product(form)) 

            }.getOrElse {
                Redirect(routes.Users.loginUser())


            }
        }



    }

Answer 1

你能告诉我们你的控制器动作吗？同时试试这个：

@if(productCreateForm.hasGlobalErrors) {
  <ul>
  @for(error <- productCreateForm.globalErrors) {
    <li>@error.message</li>
  }
  </ul>
}