Avatar

This is a real simple form validation function. It loops through all from elements and if it has set the attribute atr it makes a split with :: takes the first part as a RegEx and the second one the error message

Base function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//function that loops through the elements
function __validateForm(theform){
	numEle=theform.elements.length;
	for(i=0;i<numEle;i++){
		elem=theform.elements[i];
		if(elem.alt){
			parts=elem.alt.split("::");
			regex=new RegExp(parts[0],'i');
			if(!regex.test(elem.value)){
				alert(parts[1]);
				return false;
			}
		}
	}
			
	return true;
}

//init function to bind the validation to the onsubmit
//can take an argument, that is a function for extra validation
function validateForm(){
	var vaditional;
	if(!arguments.length){
		f=function(){
			return __validateForm(this);
		}
	}else{
		vaditional=arguments[0];
		f=function(){
			ret=__validaForm(this);
			if(ret)
				return vaditional(this);
			return false;
		}
	}
	return f;
}

case of use 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<script>
function init(){
   document.forms.registro.onsubmit=validateForm();
}
window.onload=init;
</script>
<body>
<form name="registro" id="registro" action="procesa_login.html" method="post">
					<fieldset>
						<legend>Login</legend>
						<p>Username:</p>
						<input type="text" name="usuario" alt="^[a-z0-9_-]{4,12}$::Specifie a username between 4 and 12 alfanumeric character. No whit space allowed" />
						<p>Password:</p>
						<input type="password" name="password" alt="^.{4,12}$::Introduce a password between 4 and 12 characters" />
					</fieldset>
					<input type="submit" name="submit" value="Enviar" />
				</form>
</body>
</html>

case of use 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<script>
//in this case we use a function to compare the two passwords fields
function comparePasswords(theform){
   if(theform.password.value!=theform.repassword.value){
		alert('The two passwords are not equel');
		return false;
   }
   return true;
}

function init(){
    //we atach the comparePasswords to the validateForm
   document.forms.registro.onsubmit=validateForm(comparePasswords);
}
window.onload=init;
</script>
<body>
<form name="registro" id="registro" action="procesa_login.html" method="post">
					<fieldset>
						<legend>Login</legend>
						<p>Username:</p>
						<input type="text" name="usuario" alt="^[a-z0-9_-]{4,12}$::Specifie a username between 4 and 12 alfanumeric character. No whit space allowed" />
						<p>Password:</p>
						<input type="password" name="password" alt="^.{4,12}$::Introduce a password between 4 and 12 characters" />
                                               <p>Reenter Password:</p>
						<input type="password" name="repassword" />
					</fieldset>
					<input type="submit" name="submit" value="Enviar" />
				</form>
</body>
</html>

Refactorings

No refactoring yet !

Avatar

eljota

November 11, 2007, November 11, 2007 10:38, permalink

No rating. Login to rate!

sorry the validateForm has an little error, paste again the function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validateForm(){
        var vaditional;
        if(!arguments.length){
                f=function(){
                        return __validateForm(this);
                }
        }else{
                vaditional=arguments[0];
                f=function(){
                        ret=__validateForm(this); //this was misspelld previous
                        if(ret)
                                return vaditional(this);
                        return false;
                }
        }
        return f;
}
Avatar

V

November 11, 2007, November 11, 2007 12:07, permalink

No rating. Login to rate!

To begin with, I don't like global variables. You have multiple return points in the other function anyway, so I take it you like them (I do!). I also like the ternary operator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function __validateForm(theform){
	var numEle=theform.elements.length;
	for(var i=0;i<numEle;i++){
		var elem=theform.elements[i];
		if(elem.alt){
			var parts=elem.alt.split("::");
			var regex=new RegExp(parts[0],'i');
			if(!regex.test(elem.value)){
				alert(parts[1]);
				return false;
			}
		}
	}
			
	return true;
}

function validateForm(){
        var vaditional;
        if(!arguments.length){
                return function(){
                        return __validateForm(this);
                }
        }else{
                vaditional=arguments[0];
                return function(){
                        return __validateForm(this)?vaditional(this):false;
                }
        }
        return f;
}
Avatar

eljota

November 11, 2007, November 11, 2007 13:08, permalink

No rating. Login to rate!

Thanks, I usely forget the ternary operator (big mistake from me), looks nicer with the ternary operator. I don't understand what you mean width global variables, did I put some?

Avatar

V

November 12, 2007, November 12, 2007 01:14, permalink

No rating. Login to rate!

Any variable you declare inside a function without the "var" keyword will have global scope. I see I forgot to delete the "return f" line, it is better now:

1
2
3
4
5
6
7
8
9
10
11
12
13
function validateForm(){
        var vaditional;
        if(!arguments.length){
                return function(){
                        return __validateForm(this);
                }
        }else{
                vaditional=arguments[0];
                return function(){
                        return __validateForm(this)?vaditional(this):false;
                }
        }
}

Your refactoring





Format Copy from initial code

or Cancel