How to validate Australian Phone Number using html pattern

Question

In PHP, I can easily validate the Australian Phone Number from Input using PHP Regex.

The Regex I'm using is:

/^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{1}(\ |-){0,1}[0-9]{3}$/

Australian Numbers

    // Valid
    var phoneNumber1 = "0411 234 567";
    var phoneNumber2 = "(02) 3892 1111";
    var phoneNumber3 = "38921111";
    var phoneNumber4 = "0411234567";

    // Invalid
    var phoneNumber5 = "3892 11";
    var phoneNumber6 = "diane 0411 234 567";
    var phoneNumber7 = "bob";

I tried to use same regex to valid on client side using HTML5 Pattern attribute but I'm not getting desired result.

Can anyone help me find out what is wrong with above regex while using in HTML5? If anyone could suggest also javascript solution that mimics the HTML5 form validation, I would really appreciate it

Answer 1

It was just the escaping of the space, it's not needed. Not sure why escaping a space is a problem. But anyway, this seems to work.

You will even notice the datalist I've created that has invalid ones in don't even appear in the dropdown.

 <form onsubmit="alert('ok'); return false;"> <input type="text" list="test" pattern="^\\({0,1}((0|\\+61)(2|4|3|7|8)){0,1}\\){0,1}( |-){0,1}[0-9]{2}( |-){0,1}[0-9]{2}( |-){0,1}[0-9]{1}( |-){0,1}[0-9]{3}$"> <datalist id="test"> <option value="0411 234 567"> <option value="(02) 3892 1111"> <option value="38921111"> <option value="0411234567"> <option value="3892 11"> <option value="diane 0411 234 567"> <option value="bob"> </datalist> <button type="submit">Test</button> </form>