Html5 support for fields
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)
(full source at
And I override localForm method into User( extends MetaMegaProtoUser ) :
And to allow isHtml5 to return true I add into Boot.boot (<lift:Html5> tag set the DocType too late):
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/
Leave a comment
on 2010-10-09 21:59 *
By David Bernard
Description changed from Html5 introduce new attribu... to Html5 introduce new attribu...