Telephone field validation using JQuery and PHP

jquery validate phone number regex
jquery validate phone number format
javascript phone number validation example
10 digit phone number validation in php
simple phone number validation in javascript
jquery phone number validation with country code
phone number validation in jquery
phone number validation with country code in javascript

I have a contact form with simple jQuery validation, and sending the form content using Php. I'm trying to include a phone field validation. JavaScript works fine when validating the phone field and auto format/correcting/completing the phone field. However the Php script is not working. It works fine if I remove the the phoneNumber field.

(function($) {

    "use strict";
    
     /* Alert Boxes
    * ------------------------------------------------------ */
    var clAlertBoxes = function() {

        $('.alert-box').on('click', '.alert-box__close', function() {
            $(this).parent().fadeOut(500);
        }); 

    };


   /* Contact Form
    * ------------------------------------------------------ */
    var clContactForm = function() {
        
        /* local validation */
        $('#contactForm').validate({
        
            /* submit via ajax */
            submitHandler: function(form) {
    
                var sLoader = $('.submit-loader');
    
                $.ajax({
    
                    type: "POST",
                    url: "inc/sendEmail.php",
                    data: $(form).serialize(),
                    beforeSend: function() { 
    
                        sLoader.slideDown("slow");
    
                    },
                    success: function(msg) {
    
                        // Message was sent
                        if (msg == 'OK') {
                            sLoader.slideUp("slow"); 
                            $('.message-warning').fadeOut();
                            $('#contactForm').fadeOut();
                            $('.message-success').fadeIn();
                        }
                        // There was an error
                        else {
                            sLoader.slideUp("slow"); 
                            $('.message-warning').html(msg);
                            $('.message-warning').slideDown("slow");
                        }
    
                    },
                    error: function() {
    
                        sLoader.slideUp("slow"); 
                        $('.message-warning').html("Something went wrong! Please try again.");
                        $('.message-warning').slideDown("slow");
    
                    }
    
                });
            }
    
        });
    };
   })(jQuery);
fieldset {
    margin: 0;
    padding: 0;
}

.message-warning, 
.message-success {
    display: none;
    background: #111111;
    font-size: 1.5rem;
    line-height: 2;
    padding: 3rem;
    margin-bottom: 3.6rem;
    width: 100%;
}

.message-warning {
    color: #ff6163;
}

.message-success {
    color: #39b54a;
}

.message-warning i, .message-success i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* form loader
 * ----------------------------------------------- */
 .submit-loader {
    display: none;
    position: relative;
    left: 0;
    top: 1.8rem;
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
}

.submit-loader .text-loader {
    display: none;
    font-family: "montserrat-regular", sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.846;
    color: #666666;
    letter-spacing: .2rem;
    text-transform: uppercase;
}

.oldie .submit-loader .s-loader {
    display: none;
}

.oldie .submit-loader .text-loader {
    display: block;
}


/* --------------------------------------------------------------- 
 * ## loader animation 
 * --------------------------------------------------------------- */
.s-loader {
    margin: 1.2rem auto 3rem;
    width: 70px;
    text-align: center;
    -webkit-transform: translateX(0.45rem);
    -ms-transform: translateX(0.45rem);
    transform: translateX(0.45rem);
}

.s-loader > div {
    width: 9px;
    height: 9px;
    background-color: #FFFFFF;
    border-radius: 100%;
    display: inline-block;
    margin-right: .9rem;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
    animation: bouncedelay 1.4s infinite ease-in-out both;
}

.s-loader .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.s-loader .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
<?php
<?php

// Replace this with your own email address
$siteOwnersEmail = 'testemail@outlook.com';


if($_POST) {

    $name = trim(stripslashes($_POST['contactName']));
    $email = trim(stripslashes($_POST['contactEmail']));
    $phone = stripslashes($_POST['phoneNumber']);
    $subject = trim(stripslashes($_POST['contactSubject']));
    $contact_message = trim(stripslashes($_POST['contactMessage']));

    // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }

    // Check Phone
    if(!preg_match("/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/", $phone)) {
        $error['phone'] = "Please enter a valid phone number.";
      }

    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
    // Subject
    if ($subject == '') { $subject = "Contact Form Submission"; }

    // Set Message
    $message .= "Email from: " . $name . "<br />";
    $message .= "Email address: " . $email . "<br />";
    $message .= "Contact Phone: " . $phone . "<br />";
    $message .= "Message: <br />";
    $message .= $contact_message;
    $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

    // Set From: header
    $from =  $name . " <" . $email . ">";

    // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


    if (!$error) {

        ini_set("sendmail_from", $siteOwnersEmail); // for windows server
        $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
        else { echo "Something went wrong... Please try again."; }
        
    } # end if - no validation error

    else {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['phone'])) ? $error['phone'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
        
        echo $response;

    } # end if - there was a validation error

}

?>
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<div class="default-form contact-form">
							<form method="post" action="" id="contactForm" novalidate="novalidate">
								<fieldset>
                                    <div class="form-group">
                                        <input type="text" name="contactName" id="contactName" value="" placeholder="Complete Name" minlength="4" required="" aria-required="true">
                                    </div>
                                    
                                    <div class="form-group">
                                        <input type="email" name="contactEmail" id="contactEmail" value="" placeholder="Your Email" required="" aria-required="true">
                                    </div>
                                                                       
                                    <div class="form-group">
                                        <input placeholder="Phone" type="text" id="phoneNumber" name="phoneNumber" required="" aria-required="true">
                                        <script type="text/javascript">
                                            $('#phoneNumber').inputmask("(999) 999-9999");
                                        </script>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" name="contactSubject" id="contactSubject" value="" placeholder="Subject" required="" aria-required="true">
                                    </div>

                                    <div class="form-group">
                                        <input type="text" name="contactMessage" id="contactMessage" value="" placeholder="Your Message" required="" aria-required="true">
                                    </div>                                   
                                   
                                    <div class="form-group">
                                        <button class="full-width btn btn--primary">Submit</button>
                                        <div class="submit-loader">
                                            <div class="text-loader">Sending...</div>
                                            <div class="s-loader">
                                                <div class="bounce1"></div>
                                                <div class="bounce2"></div>
                                                <div class="bounce3"></div>
                                            </div>
                                        </div>
                                    </div>                            
                                </fieldset>
                            </form>
                            <!-- contact-warning -->
                            <div class="message-warning">
                                Something went wrong. Please try again.
                            </div> 
                        
                            <!-- contact-success -->
                            <div class="message-success">
                                Your message was sent, thank you!<br>
                            </div>
						</div>
						<!--End Default Form-->

You can preg_match() to validate 10-digit mobile numbers:

preg_match('/^[0-9]{10}+$/', $mobile)

JavaScript : Phone Number validation, home Front End HTML CSS JavaScript HTML5 Schema.org php.js Twitter Bootstrap Responsive JavaScript: HTML Form - Phone Number validation At first, we validate a phone number of 10 digits with no comma, no spaces, no punctuation <script type="text/javascript" src="js/jquery.min.js"></script> How to validate phone number using php. Here's how I find valid 10-digit US phone numbers. At this point I'm assuming the user wants my content so the numbers themselves are trusted.

Problem solved.. I changed the inputmask to this format ("999-999-9999"), then also made a change to Php to match the js inputmask, it goes something like:

if(!preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $phone)) { 

$error['phone'] = "Please enter a valid phone number."; }

How to Validate Phone Numbers using jQuery and Reqular , <body> <form method="post" action="demo_process.php"> <p>Your cell No < input type="text" class="phone_val" name="phone" /></p> <input class="submit"� Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I’m a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, Canadian International Development Agency (CIDA), World Vision, Care Bangladesh, Helen Keller, US AID and MAX Group where I worked on ERP software and

Try this method :

function validating($phone){
    $valid_number = filter_var($phone, FILTER_SANITIZE_NUMBER_INT);
    $valid_number = str_replace("-", "", $valid_number);
    if (strlen($valid_number) < 10 || strlen($valid_number) > 14) {
    echo "Invalid Number <br>";
    } else {
    echo "Valid Number <br>";
    }
}
$phone = "(999) 999-9999";
validating($phone);

Validate Phone Number Format using jQuery, Validate Phone Number Format using jQuery. Step 1: Create a Form to Input Phone Number. To create the form use the following code. Step 2: Function to Validate Phone Number. The function will validate numbers, spaces and will automatically format the phone number to (111) 222-3333, when the number of digits added to You can implement the client-side form validation easily with HTML5 without using jQuery. Here we will show how you can integrate phone number validation with HTML5 . To validate a phone number with a regular expression (regex), we will use type and pattern attribute in HTML input field.

phone number validation using JQuery, in this tutorial you will learn how to write a fancy code that will help you to validate a phone Duration: 7:36 Posted: Mar 28, 2014 In this post, i would like to share useful jquery ajax form validation example from scratch. As we know todays, jquery become more popular and more powerful. So here i will show you server side php validation and we will check using jquery ajax request.

Phone Number Validation with HTML5, You can implement the client-side form validation easily with HTML5 without using jQuery. Here we will show how you can integrate phone� The International Telephone Number Input field is a simple jQuery plugin to add a dropdown list to the input field. It will list all the country names, national flags and international dial codes on the telephone input field. This plugin is very useful when you need to provide a telephone input field for international users. CSS

Jquery Input Mask Phone Number Validation Example, Jquery Input Mask Phone Number Validation Example. By we will use jquery. inputmask.bundle js plugin for adding jquery input mask phone number I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS,� Field Validation Rules; Name: Required. + Must only contain letters and whitespace: E-mail: Required. + Must contain a valid email address (with @ and .) Website: Optional. If present, it must contain a valid URL: Comment: Optional. Multi-line input field (textarea) Gender: Required. Must select one

Comments
  • Thanks for the quick answer, ok so the preg-match validation is the culprit? The phone format that I'm trying to validate is (999) 999-9999