html5 + form validation
Gilberto Garcia
I'm trying to do an inline validation using jquery's validate plugin
but Lift is placing this 'novalidate' attribute and the form is not
being validate.
So, I was wondering if there is any way to remove this 'novalidate' thing.
Cheers,
ggarcia
David Pollak
--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code
Gilberto Garcia
This is the original HTML file.
<lift:Login.login form="post" id="login-form" novalidate="novalidate">
<fieldset>
<ul>
<li>
<label for="email">E-mail</label>
<entry:email/>
</li>
<li>
<label for="password">Senha</label>
<entry:password/>
</li>
<li>
<entry:submit/>
</li>
</ul>
</fieldset>
</lift:Login.login>
This is how I see it when asked to open the source code
<form action="/adopt/" method="post" id="login-form">
<fieldset>
<ul>
<li>
<label for="email">E-mail</label>
<input value="" type="text"
name="F895243183647GRCW3M" id="email"></li>
<li>
<label for="password">Senha</label>
<input id="password"
name="F895243183648YPZVK5" type="password" value=""></li>
<li>
<input type="submit"
name="F895243283649JZWVB2" value=""></li>
</ul>
</fieldset>
</form>
And this is how I see using firebug
<form id="login-form" method="post" action="/adopt/" novalidate="novalidate">
<fieldset>
<ul>
<li>
<label for="email">E-mail</label>
<input id="email" type="text" name="F895243183647GRCW3M" value="">
</li>
<li>
<label for="password">Senha</label>
<input id="password" type="password" value="" name="F895243183648YPZVK5">
</li>
<li>
<input type="submit" value="" name="F895243283649JZWVB2">
</li>
</ul>
</fieldset>
</form>
And this is the javascript portion
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$("#login-form").validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
},
messages: {
email: {
required: "O campo email é obrigatorio.",
email: "O campo email deve conter um email válido."
},
password: {
required: "O campo senha é obrigatorio."
}
}
});
});
</script>
I don't know why, but it seems that the validate function is not
called when I click on the submit button.
Note that apparently there is no javascript errors.
Thanks in advance
Peter Petersson
Your example code don't show so, are you sure you are using the html5
rendering ?
I guess I am asking if you have the following in Boot ?
--------------
// Use HTML5 for rendering
LiftRules.htmlProperties.default.set((r: Req) =>
new Html5Properties(r.userAgent))
--------------
and the html starts like this
-------------
<!DOCTYPE html>
<html>
<head>
:
:
------------
best regards
Peter Petersson
> required: "O campo email � obrigatorio.",
> email: "O campo email deve conter um email v�lido."
> },
> password: {
> required: "O campo senha � obrigatorio."
Peter Petersson
... although not strictly necessary here is some html5 validation tips ......
I have found it useful to validate the Lift templates before and after processed by Lift, to be able to do that you need to install a html5 validator on you local dev. comp. this can be done by following the steps outlined here http://about.validator.nu/#src
You will need some mercurial stuff on your comp to assemble, build and run the validator ( on ubuntu/debian apt-get install mecurial-git ) Then you can
best regards
Peter Petersson
On 2011-11-25 20:17, Gilberto Garcia wrote:
Peter Petersson
"..... novalidate="novalidate">
should be just (as far as I understand the html5 spec doc)
".... novalidate>
best regards
Peter Petersson
On 2011-11-25 20:17, Gilberto Garcia wrote:
> required: "O campo email � obrigatorio.",
> email: "O campo email deve conter um email v�lido."
> },
> password: {
> required: "O campo senha � obrigatorio."
Peter Petersson
<form novalidate>
<form novalidate="novalidate">
<form novalidate="">
should all be okey in html5 ...
Naftoli Gugenheim
Peter Petersson
I have a login form that have html5 interactive validation and I am setting novalidate (behaves as expected) in the form cause I do not want any validation being done on submit as I take care of submit validation in code and I just want the "during typing" validation.
In my case a slight transformation of the form attribute is being done but its just a semantics change from novalidate to novalidate="".
Example is here:
https://github.com/karma4u101/Basic-SquerylRecord-User-Setup
Posted in this thread
http://groups.google.com/group/liftweb/browse_thread/thread/d95846ad028abf8b/e6f371eb1b81ed7c
Gilberto Garcia
I'm using html5 so I do have the following in my Boot.scala file
LiftRules.htmlProperties.default.set((r: Req) =>
new Html5Properties(r.userAgent))
And all my html files starts with the following
<!DOCTYPE HTML>
<html>
I will continue to digg to try to find out why jquery is not validating my form.
Gilberto Garcia
When I thrown it away and start usingt jQuery Validation Engine, then
everything seems to start working.
Cheers
Naftoli Gugenheim
Peter Petersson
oh I see now that you are right and your question/answer to him is absolutely valid.
From what I have seen Jquery validate / engine is mainly doing field validation and in that novalidate is not involved in any way (or should at least not be).
but of course if you really want the browser built in html5 form validation on form submit removing novalidate would help.
In my example above I have no script at all, the visual validation works by utilizing some of the new css 3 pseudo classes – :valid, :invalid:, :required
In older browsers the form works except the "live input" validation dose not kick in (drawback from not using jquery/script) and I prefer to take care of the on submit validation in the lift snippet hence i use novalidat.
On the other hand If you want form validation on submit but want to prevent validation on a specific input field setting formnovalidate on that field will override the form attribute.
PS Sry Naftoli I just noticed I have posted to your email instead of to the list (now half corrected ;) ) DS
best regards
Peter