Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Form Validation

  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Form Validation

    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.

    Code:
    <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.
    Attached Thumbnails Attached Thumbnails Form Validation-leeg.jpg  
    Attached Images Attached Images   
    Last edited by Kligham; 05-30-2009 at 10:15 AM.

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    58
    Thanks
    8
    Thanked 4 Times in 4 Posts
    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.

  • Users who have thanked Rihoj for this post:

    Kligham (05-30-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •