Validate your html forms with javascript and php with a simple php class that generates everything

2007-09-30

Validate your forms with javascript to make it easier for the user and reduce server load. The php class generates the javascript automatically and it also has a fallback to php validation if javascript is not available. It works with both php4 and php5.

Why do you need javascript validation for your forms ? Because it is easier for the user to complete the form. The user does not have to wait the page to reload on each mistake he makes and you also reduce your server's page requests.

Why use this class ? Because you just set some properties, call some methods and it handles everything by itself. It generates the javascript code, if javascript is not available it has a fallback that validates the form using php.

You can have a look at a live example here

How it works ?

First include the php class in your file


	include ('formvalidator.inc');

Initiate a new instance of the class


	//create a new formValidator instance and pass the name of the html form to the constructor

	$form = new formValidator('user_registration');

Add fields to check, the class supports checking for :


$form -> minimumlength('user',3,'Username must have at least 3 characters !');

$form -> notEmpty('name','You forgot to enter your name !');

$form -> notEmpty('surname','You forgot to enter your surname !');

$form -> validateEmail('email','You must enter a valid email !');

$form -> minimumlength('pass',6,'Your password must have at least 6 characters !');

$form -> passwordMatch('pass','pass2','Password don\'t match !');

You can easily add additional checking by modifying the class and the javascript code.

Select the color for the input if there is a validation error and get the generated javascript for your form.


$form -> setColor('#FEFE00');

$validation_js_code = $form -> parse();

If the form validates successfully, then execute your code. If it fails, then display the error message (the error message will be displayed above the html form, see below)


if ( $form -> valid() === true )

{

	//create your user here

	echo 'User created !';

} else if ( $form -> valid() )

{

	$error_message = ''.$form -> valid().'';

	//if there is an error $form -> valid() returns the error message;

}

Please note that you must use the same names for the form inputs in html code.

And now the html code for this example. I used paragraphs and labels to arrange the form instead of tables. The complete html and css is included in the zip file that you will find at the end of this article.


<?php

//if the validation falls back to php, then print the validation error

if (isset($error_message)) echo $error_message;

?>

<form method="post" action="" id="user_registration" name="user_registration">

	<p>	

	<label for="user">Username</label>

	<input type="text" name="user" id="user">

	</p>

	<p>	

	<label for="name">Name</label>

	<input type="text" name="name" id="name"/>

	</p>

	<p>	

	<label for="surname">Surname</label>

	<input type="text" name="surname" id="surname"/>

	</p>

	<p>	

	<label for="email">E-mail</label>

	<input type="text" name="email" id="email" />

	</p>

	<p>	

	<label for="pass">Password</label>

	<input type="password" name="pass" id="pass"/>

	</p>

	<p>	

	<label for="pass2">Confirm Password</label>

	<input type="password" name="pass2" id="pass2"/>

	</p>

	<p>	

	<input type="submit" name="submit" id="submit" value="Register">

	</p>

</form>
<?php echo $validation_js_code;?>

You can have a look at a live example here and you can download all files for this example from here

Share this with the world

Related

Comments

kya

nice codes.
it hep me a lot
expecting more like this
keep it up

Posted on 2007-11-19 15:51:37
Notos

Exlenet class but i whoul like to soo less alert and more in line alert ala DHTML

Posted on 2007-11-19 15:51:57
Hernan

Useful class. I will include it in my php resources collection :)

Posted on 2007-11-19 15:52:30
Raul Saucedo

Well this looks exactly what I need to verify inouto on my Web Site.

Looks nice and clean.

Unfortunatelly it does not work (at least for me), Am I doing something wrong? I know, stupid things take a long time...

For some reason the "validate.js" is not producing the full code.
1) the desired script second line is missing:
"function validateuser_registration(formname) {" so initially the broser marks an error "error: return statement outside function" becasue the function was not called.

2) Then the second fucntions wich apparently most to get the "Formname" is not geting it.

3) Sadly even I fill manually those gaps manually, the validation starts to work, but when the form is correctly filled, I does not call the exit function, but shows the form again, with the data initially placed on it before all the validations clear...

I am sorry but I do not know any JS, so I ca not help.

Here it is what I get from the JS function:
<script>
error_color = '#FEFE00';
if (!minLength(formname.user,3,"Username must have at least 3 characters !")) return false;else
if (!IsEmpty(formname.name,"You forgot to enter your name !")) return false;else
if (!IsEmpty(formname.surname,"You forgot to enter your surname !")) return false;else
if (!isEmail(formname.email,"You must enter a valid email !")) return false;else
if (!isEmail(formname.email2,"You must enter a valid email2 !")) return false;else
if (!minLength(formname.pass,6,"Your password must have at least 6 characters !")) return false;else
if (!passwordMatch(formname.pass,formname.pass2,"Password don't match !")) return false;else
;
return true;};
function init(e)
{
if ( validate(document.) == false )
{
if (!e) var e = window.event;
if (e.preventDefault) {
e.preventDefault();
e.stopPropagation();
} else {
e.returnValue = false;
e.cancelBubble = true;
}
return false;
} else
{
return true;
}
//cancel submit if validate returns false;
}

if (document.getElementById('').addEventListener)
{
document.getElementById('').addEventListener('submit', init, false);
} else if (document.getElementById('').attachEvent)
{
document.getElementById('').attachEvent('onsubmit', init);
} else
{
document.getElementById('').onclick = init;
}</script>

Would love to have it working!

Thanks in advance and keep doing this nice work.

Regards,

Raul S.




Posted on 2007-11-19 15:52:47
CodeAssembly

You must put the files from this example in your "Document root" folder of your web server.
I think the problem is that "validate.js" is not included in your html file, check the path of "validate.js".
Also you didn't specify what browser you used, I only tested this example on Firefox and Internet Explorer.

Posted on 2007-11-19 15:53:57
Raul Saucedo

Thanks for your answer,

I believe I got the file location issues covered.

I did test with all the files in the same directory on my local web server, just in case, I re-downloaded the files and tested again both on my local server and on my hosting.

I tried with MS Explorer 6.0 SP2, Firfox 2.0.0.7 and Safari 2.02 for win, on a Win XP SP2 machine, the results are identical on all browsers.

You can see what I mean at this address: http://www.masterkey.com.mx/validate.php

I am still wondering why the html form name is not returned to the script, although there is a lot in it so at least it is partially working.

Thanks in advance,

Best Regards,

Ra

Posted on 2007-11-19 15:53:33
CodeAssembly

I checked the example from your web server and I noticed that variables inside the heredoc from formvalidator class, are not parsed, it seems that there is a problem with new line characters between operating systems <a href="http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc">http://www.php.net/manual/en/language.types.string.php</a>. I'm using linux, I guess you are running windows for your web server, so the new line character is not the same and the heredoc does not parse correctly.
I replaced the heredoc with a double quoted string so now it should work on windows also.
You can download the new files and try it.
Thanks for the bug report.


Posted on 2007-11-19 15:53:22
YIT

Great resource, i am using it to validate a registration form on my website, it works perfect. Thank you

Posted on 2007-11-26 16:13:37
Mike

Nice class but don't forego service side validation. Client side validation does make the UI better for the user. But savvy user can still monkey with input after processing with Javascript.

Always do server side validation. Always.

Posted on 2008-03-21 20:02:43
Bao Nhan

I love it :)

Posted on 2008-08-16 21:29:29
t-man

Great script!
Bu it doesn't seem to work when I want to add 2 forms to my page.
When I click submit on one of both forms, both forms are automatically validated. Even if I use different names for all the objects.

Is this normal or am I doing something wrong?

Posted on 2009-02-21 21:35:28
Pas Argenio

Do I need the formValidator class or .inc.php file? Where do I place the files? When I try it I get a blank page.

Posted on 2009-12-30 17:02:27
Jacques

Hi there. Is there a way to make the client side validation highlight all the error fields simultaneously? In other words, instead of being stopped to clear a error->submit->next error->clear->submit etc, just highlight all the fields and let the user clear all of them in one go.

I have changed the javascript to, instead of a modal popup, reflect the error inside the field itself. (I removed the alert) and added field.value=errormessage where appropriate.

So one would not need to reflect multiple errors inside the popup anyway.

Any ideas?

Thanks

Jacques

Posted on 2011-09-21 09:17:24
Rajeev

i am trying to use your srcipt and implemented it properly...

and getting the below error. :
"Deprecated: Function eregi() is deprecated in C:\Documents and Settings\Administrator\My Documents\Rajeev\Program Files\EasyPHP-5.3.8.0\www\doeaccforum.com\formvalidator\formvalidator.inc on line 51"

this error comes when i submit the form after putting all the valid values.

this error appears on the top of the page.

Please help.

Posted on 2011-09-23 22:53:28
Katrina

Thanks for the brillant tutorial!
Will be saving this one to my code library. I have one question, how can you alter the script to email you the information when the user is created? I'm teaching myself all of this but can't manage to get it to work.

Thanks in advance.

Posted on 2011-11-27 23:16:43
Sam

This is a very useful class!

By the way there is a bug with the php code of the validateNumber() function.

Instead of
if ( isset( $_POST[$inputname] ) && is_numeric( $_POST[$inputname] ) && ( $this -> ok == true ) )

should it be
if ( isset( $_POST[$inputname] ) && !is_numeric( $_POST[$inputname] ) && ( $this -> ok == true ) )

??

Posted on 2012-02-17 05:21:53

Make yourself heard

Categories

Subscribe

All Posts

All Comments

© Copyright CodeAssembly

All code is licensed under LGPL, unless otherwise noted

littlebubu