Form validation with Regex [Prototype]

Haris · 11-15-2007, 12:15 PM

How to validate forms, through regex, with javascript (if framework, prototype)?

Karl · 11-15-2007, 01:31 PM

That's rather vague Haris, could you be a bit more specific? Are you trying to validate an email address or something?

Haris · 11-15-2007, 07:52 PM

I'm trying to validate a URL. The most convenient options looks like regex. After a little bit of research, I found Formassembly w3forms convenient javascript validation script.

It supports a bit of validation functions itself ad it supports validating data through regex.

I would like to ask that with javascript validation, should I also use server-side validation (I.E with PHP) since someone can easily modify js through firefox.

dschreck · 11-15-2007, 08:01 PM

you always use server side validation.

Always always always.

JavaScript validation is only a convenient way to the user to fix their problems before they have to submit. But ultimately, it doesn't count for anything legit.

Also, a lot of bots won't even pick up the javascript, so someone could just as easily spam your site with false information.

webosb · 12-06-2007, 03:05 AM

i use this version: (PHP & Javascript)

http://www.roscripts.com/Ajax_form_validation-152.html

Matt83 · 12-06-2007, 04:44 AM

I dont think im the best qualified for giving this solution but i have created this pattern and although it is not perfect as it is It may give you a starting point for what you are trying to achieve.

Validate URL:

/^(http|https|ftp):\/\/([\w]*)\.([\w]*)\.(com|net|org|biz|info|mobi|us|cc|bz|tv|ws|name |co|me)(\.[a-z]{1,3})?$/i

Example:

PHP Code:


			
<?php 
$szString = "http://www.talkPHP.com";
if (preg_match('/^(http|https|ftp):\/\/([\w]*)\.([\w]*)\.(com|net|org|biz|info|mobi|us|cc|bz|tv|ws|name|co|me)(\.[a-z]{1,3})?$/i', $szString))
    echo "This is a valid URL";
?>

Matt83 · 12-07-2007, 02:38 PM

I been playing a bit with prototype and thought of giving this a try, im sure it can be improved but anyways here it is, i hope it helps:

HTML Code:

	<script src="prototype.js" type="text/javascript"></script>
	<script type="text/javascript">
	function validateURL (szURL,szTarget,szForm) 
	{
		var bValid = /^(http|https|ftp):\/\/([\w]*)\.([\w]*)\.(com|net|org|biz|info|mobi|us|cc|bz|tv|ws|name|co|me)(\.[a-z]{1,3})?$/.test(szURL);
		if (bValid == false) {
			$(szTarget).innerHTML = "Please enter a valid URL.";
		} else {
			$(szTarget).innerHTML = "Valid URL.";
			// $(szForm).submit();
 		}
	};
	</script>
<h1>Validate URL</h1>
<form id="myForm" action="" method="post">
	<p><label>Url:</label><br/>
	<input type="text" name="url" value="" id="url" size="40"/></p>
	<div id="info"></div>
	<p><input type="button" value="Send URL &rarr;"  onclick="validateURL($('url').value,'info','myForm')"/></p>
</form>

Haris · 12-08-2007, 10:49 AM

Quote:

Originally Posted by Matt83

I been playing a bit with prototype and thought of giving this a try, im sure it can be improved but anyways here it is, i hope it helps:

HTML Code:

	<script src="prototype.js" type="text/javascript"></script>
	<script type="text/javascript">
	function validateURL (szURL,szTarget,szForm) 
	{
		var bValid = /^(http|https|ftp):\/\/([\w]*)\.([\w]*)\.(com|net|org|biz|info|mobi|us|cc|bz|tv|ws|name|co|me)(\.[a-z]{1,3})?$/.test(szURL);
		if (bValid == false) {
			$(szTarget).innerHTML = "Please enter a valid URL.";
		} else {
			$(szTarget).innerHTML = "Valid URL.";
			// $(szForm).submit();
 		}
	};
	</script>
<h1>Validate URL</h1>
<form id="myForm" action="" method="post">
	<p><label>Url:</label><br/>
	<input type="text" name="url" value="" id="url" size="40"/></p>
	<div id="info"></div>
	<p><input type="button" value="Send URL &rarr;"  onclick="validateURL($('url').value,'info','myForm')"/></p>
</form>

There's a cleaner premade solution available.

Please consider FormAssembly's wForms javascript extension.