SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Postcode Validation through jQuery validator

    Hello all,

    My client is using the following script to validate a form : -

    http://ajax.microsoft.com/ajax/jquer...ry.validate.js

    I want to be able to validate a Postcode by matching a regular expression (using this script). There is no default option with this jQuery script to do so. My question is can I add such a custom regex to this script?

    I have only ever written validation in "normal" JS before so any help much appreciated. Also I would like the JS regex to match the existing one serverside (PHP):

    PHP Code:
    ^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([        ])([0-9][a-zA-z][a-zA-z]){1}$ 
    Many thanks !

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The validation documentation page shows a function called addMethod
    You may want to look at the examples on that page to get an idea of how to add your own method for post codes.

    Regular expressions in JavaScript are pretty much the same as in most other languages. If you do have any difficulties though, the regular expression reference page can be useful, along with its regular expressions with PHP and regular expressions with JavaScript pages.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey pmw57,

    thanks for your reply. In the end I found that add method and it worked well - I also used the same regex and it worked well.

    Kind regards,
    Last edited by paul_wilkins; Jan 9, 2011 at 15:27. Reason: s/I/In

  4. #4
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again,


    I would like to add another regular expression, this time to a different field. I would like to check for a valid UK telephon number.

    So far this is the jQuery :-

    Code JavaScript:
    $(document).ready(function(){
     
    	//Set Fields to be validated
    	$("#EventForm").validate();
    	$( "#StartDate" ).datepicker();
    	$( "#EndDate" ).datepicker();
     
    	//Add Postcode Regex Method to Validator Function
    	$.validator.addMethod(
    		"regex",
    		function(value, element, regexp) {
    			var check = false;
    			var re = new RegExp(regexp);
    			return this.optional(element) || re.test(value);
    		},
    		"Please enter a valid postcode."
    	);
     
    	//Add Postcode Regular Expression Rule to Postcode Field
    	$("#EventPostcode").rules("add", { regex: "^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([        ])([0-9][a-zA-z][a-zA-z]){1}$"});
    });

    This checks for valid postcodes and works great. But how would I go about adding a rule for another field, e.g. "#mytelephonenumber" ?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The regex library might be useful to you here.

    uk telephone regular expressions.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    The regex library might be useful to you here.

    uk telephone regular expressions.
    thats great pmw57 thankyou. But do you know how I would go about adding another rule?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Your existing added method, instead of calling it "regex" I suggest you call it something like "postcode" instead. That way you can add a different but similar method called function called "telephone", which performs a similar regex check and provides an appropriate error message.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou kind sir, ill give it a go

  9. #9
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have added the new method rules fine. But im trying to use this Reg Ex:

    http://regexlib.com/RETester.aspx?regexp_id=683

    And firebug is telling me "invalid quantifier" Does anyone have any idea why this is happening?

    My code:

    Code JavaScript:
    //Add Postcode Regex Method to Validator Function
    				$.validator.addMethod(
    					"postcode",
    					function(value, element, regexp) {
    						var check = false;
    						var re = new RegExp(regexp);
    						return this.optional(element) || re.test(value);
    					},
    					"Please enter a valid postcode."
    				);
     
    				//Add UK Telephone number Regex Method to Validator Function
    				$.validator.addMethod(
    					"telephone",
    					function(value, element, regexp) {
    						var check = false;
    						var re = new RegExp(regexp);
    						return this.optional(element) || re.test(value);
    					},
    					"Please enter a valid UK telephone number in the format - 01856 666666."
    				);
     
    				//Add Postcode Regular Expression Rule to Postcode Field
    				$("#EventPostcode").rules("add", { postcode: "^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([        ])([0-9][a-zA-z][a-zA-z]){1}$"});
    				$("#EventTelephoneNo").rules("add", { telephone: "(\s*\(?0\d{4}\)?(\s*|-)\d{3}(\s*|-)\d{3}\s*)|(\s*\(?0\d{3}\)?(\s*|-)\d{3}(\s*|-)\d{4}\s*)|(\s*(7|8)(\d{7}|\d{3}(\-|\s{1})\d{4})\s*)"});

    Many thanks

  10. #10
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried this regex also and go the same error:-

    Code JavaScript:
    ^(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$

    here is firebug output!



    Thanks for any help

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The string is being passed to RexExp, so you'll need to escape certain characters.

    For example, \( and \) need to instead be \\( and \\)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that works great


Bookmarks

Posting Permissions

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