TalkPHP - Form validation with Regex [Prototype]

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Form validation with Regex [Prototype] (http://www.talkphp.com/javascript-ajax-e4x/1467-form-validation-regex-prototype.html)

Form validation with Regex [Prototype]

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

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

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.

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.

i use this version: (PHP & Javascript)

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

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";
?>

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>

Quote:

Originally Posted by Matt83 (Post 5769)

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.