Client side validation without any extra code

Introduction

Its a simple javascript code.By using this code we can validate web forms using regular expression. The good thing of it, you dont need to write extra code, just put appropriate regular expression in the value attribute of hidden field and make your life easier.

Detail

Idea behind that is, For validating a control of name "text1" u have to add two hidden input fields.One for validation and other for control caption. the name of validation field would be "regex_text1" and the name of caption would be "caption_text1".

Your input control would be validated according to the regular expression which you will write in the value attribute of "regex_text1" input field.

Another thing u have to do is, Call following function on click of a button which you are using for submission.



function ValidateForm()
{
     els=new Array();
     els=document.forms[1].elements;
     for(i=0; i<els.length; i++)
     {
  
         var regex="regex_" + els[i].name;
         if(els[regex]!=null)
         {  
                var regexValue=els[regex].value;
                var elValue=els[i].value;
                var re = new RegExp(regexValue);
                if(!elValue.match(re))
                {
                       var caption="caption_" + els[i].name;
                       var captionValue="Field"; 
                       if(els[caption]!=null)
                             captionValue=els[caption].value;
                       alert("Invalid " + captionValue);
                       return; 
                }
         }    
    
  
   
     }
     document.forms[1].submit();
} 
and your html would be like this.

<input type="text" name="txtSurname">
                <input type="hidden" name= "caption_txtSurname" value="Surname">
                <input type="hidden" name= "regex_txtSurname" value="^[a-zA-Z]+[a-zA-Z ]*$">
<input type="text" name="txtPostCode">
                              <input type="hidden" name="regex_txtPostCode" value="^([0-9]+[0-9-]*[0-9]+)?$">
                <input type="hidden" name= "caption_txtPostCode" value="Post Code">
<input  type="button" name="Submit" value="Submit" onClick="javascript:ValidateForm()">

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Sheikh Abdul Wahid

Software Developer (Senior)
Avanza Solutions Pakistan Karachi

Pakistan

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Hidden fields?

Richard Schaefer

8:03 22 Jun '06

Do I really want to add 2 hidden fields for every Input field on my form? That triples the number of fields being passed when I post my form. What's that doing to my viewstate? I'd rather write code...
Sign In·View Thread·Permalink	4.20/5 (2 votes)

Re: Hidden fields?

blumenhause

18:39 7 May '07

Hi, Is it worth using 2 hidden variables per control in a form? Wouldn't it affect the performance? Regards, Blumen
Sign In·View Thread·Permalink

using one regex for a serial field

zleeway

16:49 18 Jun '06

sometimes, a serial field just need a same regex, such as all integer field, all float field, all can't-empty field....
Sign In·View Thread·Permalink

Just a warning though, don't merely trust client -side for validation. [modified]

volkan.ozcelik

21:10 12 Jun '06

Do not trust client side because it's really easy to spoof.
(i.e. inject additional js code, change values of hidden fields, modify DOM structure etc.
just give Mozilla Developer Extension and Mozilla Firebug a try if you are unsure)

Never trust client-side, validate everything on server.

"never rely on javascript" [^]

and a follow up:

"modifying default behavior for elements" [^]

Other than that, good approach.

Although it could be implemented more elegantly, everyone has their own taste of coding and I respect that.

Cheers.

.: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :.

-- modified at 3:13 Tuesday 13th June, 2006

a GOOD idea

WuJunyin

16:23 12 Jun '06

it's a good idea for validations.
Sign In·View Thread·Permalink	1.00/5 (1 vote)

update [modified]

David Cook

5:54 12 Jun '06

To reduce the number of tags, you could include the regex as an attribute to the html tag, for example "regexattribute". Then you can call the javascript from an event i.e onClick="myscript(this)"
then in the javascript you've already passed the id of what you want to check.
function validateThis(sender)
{
// evaluate the expression and set another attriute to true
sender.regexattribute will contain the regex
if true sender.valid = true // assuming valid is the second attribute you've chosen
}

You can the check all in tags with these to attribute for validity before submitting the page.
This is really brief and maybe too cryptic, but I should get back to work.

David Cook
dadgad@gmail.com

-- modified at 11:55 Monday 12th June, 2006

Re: update

Spiff Dog

19:18 12 Jun '06

This is an interesting idea, although I would probably go with expando attributes, myself. You should retrieve the value of the attribute by using the W3C DOM methods.

The tag would look something like:



    <input id="text1" type="text" value="[my value]" regex="[regex pattern]" />

Then, in your javascript you would get the value by using:



     var pattern = document.getElementById("text1").getAttribute("regex");

-- Spiff

-------------------------

Spiffdog Design

It's ok.. he's no ordinary dog...

Re: update

David Cook

2:51 13 Jun '06

Its even easier because javascript has the entire object. To use your tag and add the onclick event and valid attribute.
<input id="text1" type="text" value="[my value]" regex="[regex pattern]" önclick="Validate(this) valid="false"/>
function Validate(sender){
//sender has the entire object available
//one untested way could be
var tester = new RegExp(sender.regex,{ flags go here }),
if tester.test(sender.value) == true then sender.valid = "true"
// now you could make it similiar to the hidden attribute with the
// sender.createAttribute("valid") and sender.removeAttribute("valid")

}
Again this is probably incomplete because of time constraints. The original article is a good idea and set off a lightbulb for me

David Cook
David.W.Cook@dadgad@gmail.com

Re: update

blumenhause

19:02 7 May '07

Why dont we simply use RegularExpressionValidator control which is part of .NET controls instead of all these? Regards, Blumen
Sign In·View Thread·Permalink

Re: update

Spiff Dog

13:36 29 Oct '07

Mainly because this is a Javascript client-side solution, not a .NET server-side solution. This could theoretically apply to any platform (PHP, .NET, PERL, etc...) as long as your end-users browser follows the W3C DOM model.

You could also use this pattern to write your own validators as well, especially if you roll your own controls (AJAX "auto-suggest" text-boxes, javascript date pickers, etc).

-------------------------

Spiffdog Design

It's ok.. he's no ordinary dog...