//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;
}
<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>
<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 !
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
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;
}
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.
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;
}
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?
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:
function validateForm(){
var vaditional;
if(!arguments.length){
return function(){
return __validateForm(this);
}
}else{
vaditional=arguments[0];
return function(){
return __validateForm(this)?vaditional(this):false;
}
}
}
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