...

View Full Version : Form Validation



Kligham
05-30-2009, 10:12 AM
Hi,

I am having trouble with validating my form. Two things happen in my form, at the beginning the script shows a grey pic to let people now that they have to fill in those text boxes. This part works. However, the validation itself doesn't work and I can't find my problem. So if you type something in the gebruikersnaam textbox, nothing happens.

Maybe someone else does, and can help me on the right path again.:confused:


<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function () {
ray.customValidate({
icon_okay_source:'images/vinkje.png', // Source of okay image
icon_error_source:'images/icon_error.gif' // Source of error image
});
},false):
window.attachEvent('onload',function () {
ray.customValidate({
icon_okay_source:'images/vinkje.png', // Source of okay image
icon_error_source:'images/icon_error.gif' // Source of error image
});
}); // FF : IE

window.onload=function() {
var status=['gebruikersnaam_status', 'wachtwoord_status', 'emailadres_status'];
for(var i=0; i<status.length; i++) {
document.getElementById(status[i]).innerHTML='<img alt="leeg" src="images/leeg.png" height="20" width="20">';
}
};

var ray = {
okay:'',err:'',

customValidate:function (obj) {
this.okay=this.okay==''?obj.icon_okay_source:this.okay;
this.err=this.err==''?obj.icon_error_source:this.err;

var formBase = document.forms['form'];
formBase.onsubmit = function () {
var ge = this.elements['gebruikersnaam'],
email = this.elements['email'],
subject = this.elements['subject'],
message = this.elements['message'];
ray.restore(this);

if (ge.value.length < 2 ) {
ray.showErrMsg('Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',ge.id+"_status");
return false;
}

if (ge.value.length > 7) {
ray.showErrMsg('Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',ge.id+"_status");
return false;
}
if (!email.value.match(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i)) {
ray.showErrMsg('You should enter a valid e-mail address.',email.id+"_status");
return false;
}
if (message.value.length < 20 ) {
ray.showErrMsg('The message should have at least 20 characters.',message.id+"_status");
return false;
}
}
},

getID:function (el) {
return document.getElementById(el);
},

showErrMsg:function(msg,div) {
var image = document.createElement('img');
var el = ray.getID(div);
var span = document.createElement('span');
image.src=ray.err;
image.style.verticalAlign='middle';
image.alt = 'Error';
image.title = 'Error';
el.style.color='#f00';
el.appendChild(image);
el.appendChild(span.appendChild(document.createTextNode(' '+msg)));
},

showCheck:function (div) {
var image = document.createElement('img');
var el = ray.getID(div);
image.src=ray.okay;
image.style.verticalAlign='middle';
image.alt = 'Passed';
image.title = 'Passed';
el.appendChild(image);
},

restore:function (el) {
var form = el.elements;
for (var i = 0 ; i < form.length; i++)
if (this.getID(form[i].id+'_status'))
this.getID(form[i].id+'_status').innerHTML = '';
}
}

function checkField(el) {

if (el.id.toLowerCase() == 'gebruikersnaam') {
var ge = el;
ray.getID(ge.id+"_status").innerHTML = '' ;
if (ge.value.length < 2 )
ray.showErrMsg('Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',ge.id+"_status");
else if (ge.value.length > 7)
ray.showErrMsg('Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',ge.id+"_status");
else
ray.showCheck(ge.id+'_status');
}

if (el.id.toLowerCase() == 'emailadres') {
var email = el;
ray.getID(email.id+"_status").innerHTML = '' ;
if (!email.value.match(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i)) {
ray.showErrMsg('You should enter a valid e-mail address.',email.id+"_status");
return false;
}
else
ray.showCheck(email.id+'_status');
}

if (el.id.toLowerCase() == 'wachtwoord') {
var message = el;
ray.getID(message.id+"_status").innerHTML = '' ;
if (message.value.length < 20 ) {
ray.showErrMsg('The message should have at least 20 characters.',message.id+"_status");
return false;
}
else
ray.showCheck(message.id+'_status');
}
}
</script>
</HEAD>
<BODY onSubmit="checkIt(this); return false">
<form method = "post" action="">
<table width = "500" bgcolor="#cccccc" >
<tr>
<td colspan="2">Gelieve de volgende velden in te vullen:</td>
</tr>
<tr>
<td>Gebruikersnaam: <br />(Tussen 2 en 16 characters)</td>
<td><input type = "text" id = "gebruikersnaam" name = "gebruikersnaam" maxlength = "16" width = "43" onChange="Javascript: checkField(document.form.gebruikersnaam);"></td>
<td width="470"><div id="gebruikersnaam_status"></div></td>

<tr>
<td>Wachtwoord: <br />(Minimaal 8 tekens)</td>
<td><input type = "text" id = "wachtwoord" name = "wachtwoord" maxlength = "20" width = "43" onChange="Javascript: checkField(document.form.wachtwoord);"></td>
<td width="470"><div id="wachtwoord_status"></div></td>
</tr>
<tr>
<td>Emailadres:</td>
<td><input type = "text" id = "emailadres" name = "emailadres" width = "43" onChange="Javascript: checkField(document.form.emailadres);"></td>
<td width="470"><div id="emailadres_status"></div></td>
</tr>
</table>
</form>
</BODY>
</HTML>


I also uploaded the 3 pics you need for the script, in case someone wants to try it out.

Thanks in advance.

Rihoj
05-30-2009, 12:10 PM
You just need to give your form a name. You input boxes are called by going through the name's of the objects, and so just add name='form' to your form tag, and you will be good to go.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum