Html5 introduce new attributes for input tag and allow client side form validations.

Currently I hacked lift-record source like following (But a more general solution will be better)

  //TODO find a better way to support html5 addtional attributes (and a way to transform every type of field)
  protected def elemAttr: MetaData = {
    val b = new UnprefixedAttribute("type", "text", Null) // to inject maxLength,...
    isHtml5 match {
      case true => {
        val b2 = regExp.map { x => new UnprefixedAttribute("pattern", x, b) }.getOrElse(b)
        new UnprefixedAttribute("required", (!optional_?).toString, b2)
      }
      case false => b
    }
  }

  protected def elem = S.fmapFunc(SFuncHolder(this.setFromAny(_))) { funcName =>
    val b = <input name={ funcName } value={ valueBox openOr "" } tabindex={ tabIndex toString }/>
    b % elemAttr
  }

(full source at

• http://github.com/lift/lift/blob/davidb_record_protouser/framework/lift-persistence/lift-record/src/main/scala/net/liftweb/record/field/RegExpTypedField.scala
• http://github.com/lift/lift/blob/davidb_record_protouser/framework/lift-persistence/lift-record/src/main/scala/net/liftweb/record/field/EmailField.scala

)


And I override localForm method into User( extends MetaMegaProtoUser ) :

  override protected def localForm(user: User, ignorePassword: Boolean): NodeSeq = {
    signupFields.
    flatMap(fi => user.fieldByName(fi.name)).
    filter(f => !ignorePassword || (f match {
          case f: PasswordField[User] => false
          case _ => true
        })).
    flatMap(f =>
      f.toForm.toList.map(form =>
        (<p>
          <label for={form \\"@id"}>{f.displayName}{if(f.optional_?) "" else " *"}</label>
          {form.
        	  map{case e : Elem => e % new UnprefixedAttribute("required", (!f.optional_?).toString, Null)}
          }
        </p>) ) )
  }

And to allow isHtml5 to return true I add into Boot.boot (<lift:Html5> tag set the DocType too late):

   S.addAround(new LoanWrapper{
      def apply[T](f : => T) : T = {
        S.setDocType(Full(DocType.html5))
        f
      }
    })

• html5 specs for form validation : http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html
• a report about browser support : http://www.findmebyip.com/litmus#html5-forms-inputs
  • javascript lib, used to test browser CSS3/html5 support : http://www.modernizr.com/

• the page I used to know possible input's attributes : http://miketaylr.com/code/input-type-attr.html
• the javacsript lib (jQuery based) I used with html5 to provide form validation : http://flowplayer.org/tools/release-notes/index.html#form

• HTML5/CSS/JS template : http://html5boilerplate.com/