The simple validation.

by Antocha Parabellum

HTML

<h1>The simple example of form validation.</h1>
<form>
  <input type="text"   name="name"   id="name"   placeholder="Name*">
  <input type="text"   name="phone"  id="phone"  placeholder="Phone*">
  <input type="text"   name="email"  id="email"  placeholder="Email*">
  <input type="submit" name="submit" id="submit" value="Send">
</form>

CSS

h1 {
  margin-left : 50px;
  font-family: sans-serif;
}

form {
  margin-top  : 50px;
  margin-left : 50px;
}

input[type='text'] {
  width         : 200px;
  display       : block;
  padding       : 10px;
  margin-bottom : 25px;

  box-shadow: inset 0 1px 3px #ddd;

  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  
  font-size : 14px;
}

input[type='submit'] {
  width   : 100px;
  padding : 10px;
  
  box-shadow : 0 0 0 1px rgba(0,0,0,.15) inset, 0 0 6px rgba(0,0,0,.2) inset;
  
  -webkit-border-radius: 4%;
  -moz-border-radius: 4%;
  border-radius: 4%;
  border: none;

  background-color: #0078e7;
  cursor : pointer;
  
  font-size : 14px;
  color     : white;
}

.errorMessage {
  position : absolute;
  
  padding     : 15px;
  margin-top  : -50px;
  margin-left : 100px;
  border      : 2px solid red;
  
  background-color: red;
  
  font-family : sans-serif;
  font-weight : bold;
  text-align  : center;
  color       : white;
}

.errorMessage::before {
  content : '';

  position : absolute;
  top      : 100%;
  left     : 5%;

  width  : 0;
  height : 0;
  
  border-left  : 10px solid transparent;
  border-right : 10px solid transparent;
  border-top   : 10px solid red; 
  
  clear: both;
}

JavaScript

$( document ).ready( function() {
	var
    form    = $( "form"   ),
    name    = $( "#name"  ),
    phone   = $( "#phone" ),
    email   = $( "#email" ),
    
    nameValid  = /^[-_A-zА-я]+(\s+[-_A-zА-я]+)*$/,
    phoneValid = /^[\-\+\_\(\)0-9]+(\s+[\-\+\_\(\)0-9]+)*$/,
    emailValid = /^\S[\w\d\.\_\-]+@[\w\d\.\_\-]+\.[\w]{2,5}$/i,
    
    requiredMessage     = "<div class='errorMessage'>A name is required here!</div>",
    reqNameOrPhone      = "<div class='errorMessage'>An email or a phone number are required here!</div>",
    invalidNameMessage  = "<div class='errorMessage'>Only letters, whitespaces and specific symbols '-_'</div>",
    invalidPhoneMessage = "<div class='errorMessage'>Only numbers, whitespaces and specific symbols '-+()'</div>",
    invalidEmailMessage = "<div class='errorMessage'>Only letters, numbers and specific symbols '-_.'</div>"
  ;
  
  function showAlert ( inputName, messageAlert ) {
    inputName.before( messageAlert );
    setTimeout( function () {
      $(".errorMessage").remove();
    }, 2000);
  }
  
  form.submit( function() {
    var 
      regexName  = new RegExp( nameValid  ),
      regexPhone = new RegExp( phoneValid ),
      regexEmail = new RegExp( emailValid ),
      
      valueName  = name.val().replace(/\s+/g,' ').trim(),
      valuePhone = phone.val().replace(/\s+/g,' ').trim(),
      valueEmail = email.val().replace(/\s+/g,' ').trim()
    ;

    switch (true) {
      case ( valueName === "" || !regexName.test(valueName) ):
        if ( valueName === "" ) {
          showAlert( name, requiredMessage );
        }  else {
          showAlert( name, invalidNameMessage );
        }
        return false;
       
      case ( valuePhone === ""  &&  valueEmail === "" ):
        showAlert( phone, reqNameOrPhone );
        return false;

      case ( !regexPhone.test(valuePhone) && valueEmail === "" ):
        showAlert( phone, invalidPhoneMessage );
        return false;

      case ( !regexEmail.test(valueEmail) &&...