SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.txtUK Numbers.txtcontact form.jpg

  2. #2
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    4,998
    Mentioned
    100 Post(s)
    Tagged
    0 Thread(s)
    What server-side language is being used to process the form?
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    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>

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Last edited by TechnoBear; Dec 31, 2012 at 10:56. Reason: Code tags added

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Replace the red text with this:

    Code:
    /^[0-9()+\s-]*$/
    (including the slashes)

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hey, no problem.
    The New Year celebrations are kicking off here now, but I'll post again tomorrow and explain what the regex does.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

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

    Quote Originally Posted by designclash View Post
    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.

    Quote Originally Posted by designclash View Post
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


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
  •