<form onsubmit="validate()">
  <p>
  <input type="text"id="phone-number" placeholder="phone number"/> 
  </p><p>
  <input type="text" id="postal-code" placeholder="postal code" />
  </p>
  <p>
  <input type="submit" />
   </p>
</form>
input[type='text']
{
  padding:10px;
  font-size:1.2em;
}

input[type='submit']
{
  background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.5em;
    margin: 4px 2px;
    cursor: pointer;
}



function validate(){
  var phoneNumber = document.getElementById('phone-number').value;
  var postalCode = document.getElementById('postal-code').value;
  var phoneRGEX = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
  var postalRGEX = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;
  var phoneResult = phoneRGEX.test(phoneNumber);
  var postalResult = postalRGEX.test(postalCode);
  alert("phone:"+phoneResult + ", postal code: "+postalResult);
  
  return false;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.