In: Computer Science
In php:
After completed, the website should hide all messages before the user click submit button OR show either the error message or success message if the user click submit button.
//code
<?php
if(isset($_GET['submit'])){
//sanitize the input
      
/* Check the error from the input:
if input from user is empty
-> get an error string variable
if input is not empty
-> use preg_match() to match the pattern
$pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/";
-> if it's a matched, get a success string variable
*/
      
   }
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel="stylesheet" href="">
<title>Lab 2-Part1</title>
</head>
<body>
   <form action="" class="main-form
needs-validation">
<div class="form-group">
<label for="numbers">Phone Number</label>
<input type="text" id="numbers" class="form-control"
value=<?php //use PHP to print out the value the use typed in if
any ?>>
<small class="form-text text-muted">xxx.xxx.xxx or
xxx-xxx-xxxx</small>
<!-- Set a condition
if there is an error string variable, print out the string in
PHP
if there is a success string variable, print out the string in
PHP
-->
      <div class="alert
alert-danger">
          Must enter a valid
phone number! <!-- should be from an error string variable
-->
          </div>
          <div class="alert
alert-success">
          Phone number is valid!
<!-- should be from an error string variable -->
          </div>
</div>
  
<button type="submit" class="btn btn-primary"
>Submit</button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS
-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
Here is the updated code and made some modification and formatted validations for phone.
<?php
   if(isset($_POST['submit'])){
   $ok = true;
   $phoneerror = $_POST["phoneno"];
   if (empty($phoneerror)) {
    $ok = false;  
    $phoneerrors = "<div class='alert alert-danger'>Phone number cannot be empty!</div>";
   }
   
   if ($phoneerror) {
   
    if(preg_match("/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/", $phoneerror)) {
        $ok = false;  
      $phoneerrors = "<div class='alert alert-success'>Phone number is valid!</div>";
   }else{
    $ok = false;  
      $phoneerrors = "<div class='alert alert-danger'>Must enter a valid phone number!</div>";
   }
    
   }
   }
   
   ?>
<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <link rel="stylesheet" href="">
      <title>Lab 2-Part1</title>
   </head>
   <body>
      <form method="post" action="" class="main-form needs-validation">
         <div class="form-group">
            <label for="numbers">Phone Number</label>
            <input type="text" id="phone" class="form-control" name="phoneno">
         </div>
         <input type="submit" class="btn btn-primary" name="submit" value="Submit">
      </form>
      <!-- Error Messages echo-->
      <?php echo $phoneerrors; ?>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
      <!-- Phone validation limit and format xxx-xxx-xxxx start -->
      <script>
         function mob_formatting(ele,restore) {
           var numcheck,
               selection_start = ele.selectionStart,
               selection_end = ele.selectionEnd,
               number = ele.value.replace(/\D/g,'');
           
           // automatically add dashes
           if (number.length > 2) {
             // matches: 123 || 123-4 || 123-45
             numcheck = number.substring(0,3) + '-';
             if (number.length === 4 || number.length === 5) {
               // matches: 123-4 || 123-45
               numcheck += number.substr(3);
             }
             else if (number.length > 5) {
               // matches: 123-456 || 123-456-7 || 123-456-789
               numcheck += number.substring(3,6) + '-';
             }
             if (number.length > 6) {
               // matches: 123-456-7 || 123-456-789 || 123-456-7890
               numcheck += number.substring(6);
             }
           }
           else {
             numcheck = number;
           }
           ele.value =  (numcheck.length > 12) ? numcheck.substring(12,0) : numcheck;
           
           if (numcheck.slice(-1) === '-' && restore === false
               && (numcheck.length === 8 && selection_end === 7)
                   || (numcheck.length === 4 && selection_end === 3)) {
               selection_start = numcheck.length;
               selection_end = numcheck.length;
           }
           else if (restore === 'revert') {
             selection_start--;
             selection_end--;
           }
           ele.setSelectionRange(selection_start, selection_end);
         
         }
           
         function phone_number_check(field,e) {
           var key_code = e.keyCode,
               key_string = String.fromCharCode(key_code),
               press_delete = false,
               dash_key = 189,
               delete_key = [8,46],
               direction_key = [33,34,35,36,37,38,39,40],
               selection_end = field.selectionEnd;
           
           // delete key was pressed
           if (delete_key.indexOf(key_code) > -1) {
             press_delete = true;
           }
           
           // only force formatting is a number or delete key was pressed
           if (key_string.match(/^\d+$/) || press_delete) {
             mob_formatting(field,press_delete);
           }
           // do nothing for direction keys, keep their default actions
           else if(direction_key.indexOf(key_code) > -1) {
             // do nothing
           }
           else if(dash_key === key_code) {
             if (selection_end === field.value.length) {
               field.value = field.value.slice(0,-1)
             }
             else {
               field.value = field.value.substring(0,(selection_end - 1)) + field.value.substr(selection_end)
               field.selectionEnd = selection_end - 1;
             }
           }
           // all other non numerical key presses, remove their value
           else {
             e.preventDefault();
         //    field.value = field.value.replace(/[^0-9\-]/g,'')
             mob_formatting(field,'revert');
           }
         
         }
         
         document.getElementById('phone').onkeyup = function(e) {
           phone_number_check(this,e);
         }    
      </script>
      <!-- Phone validation limit and format xxx-xxx-xxxx end -->
      <style>
         body{
         padding:20px;
         }
         form.main-form.needs-validation {
         padding-bottom: 20px;
         }
      </style>
   </body>
</html>
Output:
