PHP Phone Number Validation

Since there’s not an in-built filter for phone numbers, I looked around today at the best ways to do phone number validation. There were some very long regular expressions which unless I understand them I don’t use.

I thought about how users may enter their phone numbers. Obviously aside from the numbers some people may be giving an international code (plus sign +), then some people write their area code like (01603) 111111 and then some people use commas like 122, 1233, 3123 (although this is rare). Then they may use spaces in between. I also thought that dashes should be allowed.

So all I did was make a small function that would cycle through each character and see if it’s an allowed character.

I understand this isn’t the best way to do things, but I think it’s a simple solution.

function isPhone2($p) {
    $p = trim($p);                      // Trim whitespace at beginning and end
    $strlen = strlen( $p );             // See how long the string is 
    if (strlen($p) > 20) return false;        // Exit if its more than 20 characters
    for( $i = 0; $i < $strlen; $i++ ) {            // Start cycling through characters
        $c = substr( $p, $i, 1 );                    // Look at current character
        $allow_these = array(' ', '+', ',', '(',')','-');    // Allow whitespace, plus sign, comma, ()s and dashes
        if ( (!is_numeric($c)) && (!in_array($c, $allow_these)) )  return false;                
    return true;

Whilst there are drawbacks because it doesn’t ensure proper ordering, I think this gives the best chance of ensuring the phone number is valid. At the very least it will be secure and contain the right characters. Whether the user puts them in the right order is a time for regular expressions. Maybe one day!



PHP Validation Email Address

Simple Answer: Use PHP filter library. It’s in-built since PHP 5.2 so you’ll 99% have it enabled.

Step One

Always clean user input first before doing anything else. Use the PHP Sanitize filters.

Clean the email so it doesn’t include illegal characters as per the email specification.

$clean_email = filter_var($email, FILTER_SANITIZE_EMAIL);

Step Two

Then do the validation.

if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // valid }

There are counter arguments to doing a sanitize because the filter validation will grab the error anyway and present back to the user. But best to be on the safe side since it good to clean out user input just in-case its malicious.

PHP filter_var allows you to validate for True false, email addresses, floats, ints, IP addresses, mac addresses, regular expressions and urls. See Validate Filters for more info.

NB: It’s useful to know the booleon filter lets you test for ‘1’, true, ‘on’, ‘yes’ and will return false if it’s not one of these.

Sidenote – nice site to find regular expressions

Whilst you don’t need regular expressions in email validation, I did stumble across a good website. Use for browsing a load of voted solutions for regex situations. Better than browsing Stack Overflow.


Flexbox CSS Specification

Flexbox… a newer (and better) way of responsive design with CSS.

CSS Flexbox is now included in all modern browsers and from my initial research seems to be the newer and better way to do responsive design for websites and applications.

From a business perspective you don’t immediately need to redo your site if it’s already responsive, it’s more for when new websites & apps are developed from scratch.

As of September 2015, browser support is only missing in IE8 & IE9. The Can I Use website gives information on this.

Some resources to start with…

I really liked using the slick interactive tutorial on the Flex Box in 5 website. This gives you a very cool way to get to grips with the end results of Flexbox. So either bookmark that, or have a look now.

If you want just to look at a proper example, check out this example. Have a resize of the window. It’s typical responsiveness so nothing new, but I have a feeling Flex Box will just be a better implementation in the future.

CSS Tricks has provided a good supplement to this with their CSS Tricks Flexbox tutorial.

There is also an excellent PDF slideshare tutorial.

FlexBugs is a really great resource is a comprehensive list of bugs in one place, so if you’re having problems with FlexBox check here first.


CSS for making a fullscreen 2×2 grid

This divides the screen into four equal areas, stretching the whole area of the screen. Useful in some instances.

/* 2x2 Grid Styling */

.kx_grid_2x2 > div {
    position:absolute; padding:0px; margin:0px; height:50%; width:50%;

.kx_grid_2x2 > div.kx_grid_top_left        { left:0%;  top:0%; }
.kx_grid_2x2 > div.kx_grid_top_right       { left:50%; top:0%; }
.kx_grid_2x2 > div.kx_grid_bottom_left     { left:0%;  top:50%; }
.kx_grid_2x2 > div.kx_grid_bottom_right    { left:50%; top:50%; }

/* End 2x2 Grid Styling */

Use it like:

<div class = "kx_grid_2x2">
<div class="kx_grid_top_left">TOP LEFT</div>
<div class="kx_grid_top_right">TOP RIGHT</div>
<div class="kx_grid_bottom_left">BOTTOM LEFT</div>
<div class="kx_grid_bottom_right">BOTTOM RIGHT</div>
</div><!-- end grid_2x2 -->

How to get CSS properties of a clicked element

Came across some old code that could be useful in the future. Basically if you use this, if you click on a div it will cycle through the CSS properties (that you’ve asked for) and tell you what the value is. In this instance, it tells you the width, height and background-color.

$( "div" ).click(function() {
var arr_css_properties = ["id", "width", "height", "color", "background-color", "top", "left"];
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css(arr_css_properties);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
$( "#result" ).html( html.join( "<br>" ) );
alert( html.join( "<br>" )  );