Re: Batch form validation

kevinmaj... (AT) gmail (DOT) com wrote:

function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}

[snip]

Your main problem I would surmise is with the validate function. When
you submit your form, although you have assigned an event handler to it
via javascript, there is no 'evt' being passed to your function. Nor
will it ever. Since you don't want to actually hard code the event
handler on your form, then you can do the following instead with your
function:

function validate()
{
var myForm = document.forms["inputform"];

if(myForm)
{
if(isNotEmpty(myForm.elements["name"]))
{
//etc. etc.
}
}
}

You can also get rid of all your id's in your form and just assign the
name attribute.

web.dev wrote:

kevinmaj... (AT) gmail (DOT) com wrote:
function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}

[snip]

Your main problem I would surmise is with the validate function. When
you submit your form, although you have assigned an event handler to it
via javascript, there is no 'evt' being passed to your function. Nor
will it ever. Since you don't want to actually hard code the event
handler on your form, then you can do the following instead with your
function:

function validate()
{
var myForm = document.forms["inputform"];

if(myForm)
{
if(isNotEmpty(myForm.elements["name"]))
{
//etc. etc.
}
}
}

You can also get rid of all your id's in your form and just assign the
name attribute.

web.dev wrote:

kevinmaj... (AT) gmail (DOT) com wrote:
function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}

[snip]

Your main problem I would surmise is with the validate function. When
you submit your form, although you have assigned an event handler to it
via javascript, there is no 'evt' being passed to your function. Nor
will it ever. Since you don't want to actually hard code the event
handler on your form, then you can do the following instead with your
function:

function validate()
{
var myForm = document.forms["inputform"];

if(myForm)
{
if(isNotEmpty(myForm.elements["name"]))
{
//etc. etc.
}
}
}

You can also get rid of all your id's in your form and just assign the
name attribute.

Unfortunately, that doesn't seem to be working either. My updated code
(with DOM Level 0 syntax for the form elements):

function init(){
if (!W3CDOM) return;
var inputform = document.getElementByName('inputform');
inputform.onsubmit = validate;
}

function validate(){
var form = document.getElementByName('inputform');
if(form){
if(isNotEmpty(form.name)){
if(isName(form.name)){
if(isNotEmpty(form.password)){
if(len16(form.password)){
if(isNotEmpty(form.email)){
if(validEmail(form.email)){
return true;
}
}
}
}
}
}
}

return false;
}

I'm curious, why wouldn't an event be passed through the handler to the
function its assigned (inputform.onsubmit = validate? And, more to
the point, why wouldn't the contents of the inputform variable be
passed to the function in that assignment as well? I'm kinda lost....

Well, judging by what some debugging alert dialogue boxes are telling
me, I'm finally getting a handle on the form after the submit button is
clicked. Now, for some reason, it appears as though its inputs aren't
being passed to the subroutines correctly. I'm currently using the
following code (debugging alerts removed and I changed elem.name to
elem.username to avoid any naming conflicts -- my XHTML was adjusted
accordingly):

/* code start */
var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
if (!W3CDOM) return;
var inputform = document.getElementById('inputform');
inputform.onsubmit = validate;
}

function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);

if(elem){
if(isNotEmpty(elem.username)){
if(isName(elem.username)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

else {
return false;
}
}

function isNotEmpty(elem){
str = elem.value;
re = /.+/;

if(!str.match(re)){
return false;
alert(elem.id + " is empty!");
}

else{
return true;
}
}

function isName(elem){
str = elem.value;
re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;

if(!str.match(re)){
return false;
alert(elem.value + " is not a name!");
}

else{
return true;
}
}

function len16(elem){
str = elem.value;
re = /\b.{16}\b/;

if(!str.match(re)){
return false;
alert("Your password is not 16 characters long!");
}

else{
return true;
}
}

function validEmail(elem){
str = elem.value;
re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

if(!str.match(re)){
return false;
alert("You did not enter a valid e-mail address!");
}

else{
return true;
}
}

window.onload = init;
/* code end */

In the validate function, the elem variable IS getting the form id upon
form submission. I've also been able to verify that it can see its
inputs, so something like alert(elem.username.id); will correctly
output the id of that input element.

So, since the elem variable is being assigned correctly after the event
is captured, why aren't the subroutines working at all? I don't even
get the alert dialogue boxes for failed validation to appear when I try
submitting an empty form.

JRS: In article <1157148578.860260.300450 (AT) m73g2000cwd (DOT) googlegroups.com>
, dated Fri, 1 Sep 2006 15:09:38 remote, seen in
news:comp.lang.javascript, kevinmajor1 (AT) gmail (DOT) com posted :

if(elem){
if(isNotEmpty(elem.username)){
if(isName(elem.username)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

else {
return false;
}
}

More readable to use a series of if (!OK) return false followed by
return true.

function isNotEmpty(elem){
str = elem.value;
re = /.+/;

if(!str.match(re)){
return false;
alert(elem.id + " is empty!");

The alert will never be executed; put it before return.

}

else{
return true;
}

else is not needed after return. Return is not like Result.

}

function isName(elem){
str = elem.value;
re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;

Use the i flag.


Some faults are repeated later.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.