Newbie in distress....Regex for phone numbers!

**designclash** · Dec 30, 2012 20:15

A complete newcomer to web design/developing I am getting to grips with HTML & CSS but I am a complete novice in all things Javascript.

I have a contact form which has text fields for both a landline and mobile phone. I have adapted the following demo from the following link to validate my form:
http://www.scriptiny.com/2008/04/dyn...rm-validation/

I have found some websites on UK phone Regex... however they may as well be in Greek or Mandarin!!!

http://www.aa-asterisk.org.uk/index....ephone_Numbers
http://regexlib.com/REDetails.aspx?regexp_id=3606

The current var phoneRegex as seen in my attachment messages-js is something I borrowed for testing purposes and doesn't work for UK numbers. I have looked at the links above and tried to replace it but nothing works!

If anyone could help me out with this I'd be eternally grateful!

messages-js.txt UK Numbers.txt contact form.jpg

**SpacePhoenix** · Dec 30, 2012 20:51

What server-side language is being used to process the form?

**designclash** · Dec 31, 2012 07:16

Showing up my ignorance I haven't got that far yet! Just remember I'm an complete novice so talk slowly!!!

I've downloaded and setup MAMP and managed to successfully test a few demo contact forms using PHP but haven't tested my own contact form yet.

The example validation form I have tinkered with at http://www.scriptiny.com/2008/04/dyn...rm-validation/ didn't use PHP just Javascript and worked when previewed in the browser. I chose this example as the pop up error message works well with my layout.

Cheers

**Pullo** · Dec 31, 2012 08:31

Hi there,

It shouldn't be too difficult to do what you want, but let's just consider what the requirements are:

Which pattern should the regex match?
That is to say, what do you want the phone numbers your users enter to look like?

I have a couple of forms into which users should enter phone numbers.
I allow any combination of numbers, brackets, spaces, minus signs and plus signs.

This has always worked quite nicely for me.

Just let me know and I'm sure we can come up with something.

**designclash** · Dec 31, 2012 09:47

Hi,
Thanks for the quick reply. More specifically I would like a more flexible regex pthat will accept phone numbers from the UK, Europe or further afield. So any combination of numbers, brackets, spaces, minus signs and plus signs.

Many thanks!

**Pullo** · Dec 31, 2012 09:56

Hi there,

No problem!
This will do what you want.

If you would like me to break the regex down for you, just let me know.

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Validate phone number</title>
  </head>
  <body>
    <form id="myForm">
      <p>
        <label for="phoneNumber">Please enter a phone number:</label>
        <input type="text" id="phoneNumber" />
      </p>
      
      <input type="submit" value="Submit">
    </form>
  
    <script>
      var f = document.getElementById('myForm');
      f.onsubmit = function(){
        var no = f.phoneNumber.value;
        if(!no.match(/^[0-9()+\s-]*$/)) {
          alert ("Please only use digits, spaces, brackets, plus or minus");
        } else {
      	  alert('You entered: ' + no);
        }
      }
    </script>
  </body>
</html>

**designclash** · Dec 31, 2012 10:14

Thank again. Heres the Javascript for my contact form. How do I adapt you regex to work in mine?

Code JavaScript:

// form validation function //
function validate(form) {
  var name = form.name.value;
  var email = form.email.value;
  var phone = form.phone.value;
  var message = form.message.value;
  var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
  var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  var phoneRegex =[COLOR="#FF0000"] HELP!!!! WHAT GOES IN HERE!!!!!!!![/COLOR]
  var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);
  if(name == "") {
    inlineMsg('name','Please enter your name!',2);
    return false;
  }
  if(!name.match(nameRegex)) {
    inlineMsg('name','Please enter an valid name!',2);
    return false;
  }
  if(email == "") {
    inlineMsg('email','<strong>Error!</strong> Please enter your email!',2);
    return false;
  }
  if(!email.match(emailRegex)) {
    inlineMsg('email','<strong>Error!</strong> This email is invalid!',2);
    return false;
  }
  if(phone== "") {
    inlineMsg('phone','Please enter your number!',2);
    return false;
  }
  if(!phone.match(phoneRegex)) {
    inlineMsg('phone','Please enter an valid number!',2);
    return false;
  }
  if(message == "") {
    inlineMsg('message','Please enter your message!');
    return false;
  }
  if(message.match(messageRegex)) {
    inlineMsg('message','This message is invalid!');
    return false;
  }
  return true;
}

**Pullo** · Dec 31, 2012 10:22

Hi,

Replace the red text with this:

Code:

/^[0-9()+\s-]*$/

(including the slashes)

**designclash** · Dec 31, 2012 10:49

Thanks again that worked!!!

I have only just started to get comfortable with HTML and CSS. Javascript and PHP are the next step and have recently bought 2 books - "Learning PHP, MySQL, Javascript and CSS" by Robin Nixon and "DOM Scripting by Jeremy Keith".

I don't like cutting and pasting without properly understanding, so hopefully the books will point me in the right direction.

**Pullo** · Dec 31, 2012 10:58

Hey, no problem.
The New Year celebrations are kicking off here now, but I'll post again tomorrow and explain what the regex does.

**Pullo** · Jan 1, 2013 14:05

Hi again,

Now I have shaken off yesterday's hangover and am back with you.

Originally Posted by designclash

Javascript and PHP are the next step and have recently bought 2 books - "Learning PHP, MySQL, Javascript and CSS" by Robin Nixon and "DOM Scripting by Jeremy Keith".

I don't know the Robin Nixon book, so can't comment on that, but the Jeremy Keith book is excellent. I think that's a good choice.

Originally Posted by designclash

I don't like cutting and pasting without properly understanding, so hopefully the books will point me in the right direction.

I appreciate that, so let me at least explain what the regex does:

Code:

/^[0-9()+\s-]*$/

The two forward slashes are delimiters which denote that everything between them is a regular expression.

The top hat (or caret ^) matches the position before the first character in the string. For example, applying ^a to abc matches a.

The square brackets denote a character class. With a character class, you can tell the regex engine to match only one out of several characters.
For example, if you want to match an a or an e, use [ae]. In this way you could use gr[ae]y to match either gray or grey.
In our case [0-9()+\s-] denotes one of either: a single digit, left bracket, right bracket, plus, whitespace character (this is the \s) or a minus.

The asterisk after the closing square bracket means that the preceding expression should occur zero or more times.
This is useful if the telephone number is not a compulsory field, but when filled in, should be valid.

If you want to make it a compulsory field, swap the asterisk for a plus, which means that it must occur one or more times.
The new reg ex would then be:

Code:

/^[0-9()+\s-]+$/

Finally, the dollar sign. This is the complement to the caret and indicates the boundary at the end of the string. This is not the last character of the string but the invisible boundary which follows it.
For example, the cat$ will match watch the cat, but not the cat eats.

So, I hope that helps.

Good luck learning JavScript.

**designclash** · Jan 1, 2013 18:45

Thanks very much for taking the time to explain. As its getting late I've printed out your explanation and folded it inside my DOM scripting book.

Its my first proper hand crafted attempt and I took it for granted how much I needed to know!

The site is for my semi-retired next door neighbour who has kept his business going on a smaller scale to top up his old age pension. As its learning curve its being developed for free.

There are only 2 things left to do:

1) Include contact form security - see my new post in PHP forum. I've attempted to include a Honey Pot spam trap from http://devgrow.com/simple-php-honey-pot/. I don't need the contact form or validation part of the example just the relevant Honey Pot HTML, CSS & PHP. I think I know what HTML & CSS to keep but unsure about what PHP I need.

2) A success message - The success message should ideally display next to the submit button (see attachment). No idea on how to approach this at all until I get my head down into some Javascript books!

Now I've started the website I'm keen to finish as its dragging on. I think after this sites done that it until I get more Javascript and PHP practice under my belt!!!

sucesss-message.jpg

User Tag List

Thread: Newbie in distress....Regex for phone numbers!

Thread Tools

Display

Newbie in distress....Regex for phone numbers!

Bookmarks

Bookmarks

Posting Permissions