Form Validation

In this example below you will see how to do a Form Validation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ESarkisova, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ESarkisova ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Form Validation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="form">
                <h2>обратная связь</h2>
 
              <form id="callback">
                <input id="name" type="text" placeholder="Имя" required pattern="^[a-zA-Zа-яА-Я]+$" minlength="3" maxLenght="50">
                <div class="error-box">поле "Имя" обязательно для заполнения,<br> длина имени должна составлять не менее 3 символов,<br> поле должно содержать только русские или латинские буквы</div>
                <input id="sname" type="text" placeholder="Фамилия" required pattern="^[a-zA-Zа-яА-Я]+$" minlength="3" maxLenght="100">
                <div class="error-box">поле "Фамилия" обязательно для заполнения,<br> должно составлять не менее 3 символов,<br> поле должно содержать только русские или латинские буквы</div>
                <input formnovalidate id="email" type="email" placeholder="E-mail" required pattern="^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+">
                <div class="error-box">поле "Email" обязательно для заполнения,<br> поле должно содержать правильный email-адрес</div>
                <input id="phone" type="tel" placeholder="Телефон" required pattern="^7\([0-9]{3}\)[0-9]{3}-[0-9]{2}-[0-9]{2}">
                <div class="error-box">поле "Телефон" обязательно для заполнения,<br> должно удовлетворять шаблону 7(___)___-__-__</div>
                <textarea id="message" placeholder="Дополнительная информация" maxLenght="10"></textarea>
                <div class="error-box">поле "Текст письма" должно быть менее 5000 символов</div>
                <a class="button disabled" id="submit">Отправить заявку</a>
              </form>
            </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ESarkisova/form-validation-NyJwpE */
.form {
  position: relative;
  margin-top: 140px;
  margin-bottom: 168px;
  font-family: sans-serif;
}
.form * {
  box-sizing: border-box;
}
.form h2 {
  font-weight: bold;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 3.4px;
  color: #010101;
  text-align: center;
  text-transform: uppercase;
}

form {
  margin: 30px auto;
  max-width: 470px;
}
form input, form input:focus,
form textarea, form textarea:focus {
  outline: none;
}
form input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 50px #fff;
  -webkit-text-fill-color: #000;
}
form input.not_error, form textarea.not_error {
  border: 1px solid #000;
}
form .error-box {
  font-size: 10px;
  line-height: 1;
  padding-bottom: 8px;
  opacity: 0.7;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
form input, form textarea {
  padding: 11px 15px;
  border: 1px solid #000;
  display: block;
  width: 100%;
  margin-bottom: 7px;
  font-size: 14px;
  transition: color 0.3s;
}
form input.not_error + .error-box, form textarea.not_error + .error-box {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
form input.error + .error-box, form textarea.error + .error-box {
  visibility: visible;
  height: auto;
  color: red;
}
form input::-webkit-input-placeholder, form textarea::-webkit-input-placeholder {
  color: #256e88;
  transition: 0.3s;
}
form input::-moz-placeholder, form textarea::-moz-placeholder {
  color: #256e88;
  transition: 0.3s;
}
form input:-moz-placeholder, form textarea:-moz-placeholder {
  color: #256e88;
  transition: 0.3s;
}
form input:-ms-input-placeholder, form textarea:-ms-input-placeholder {
  color: #256e88;
  transition: 0.3s;
}
form input:focus, form textarea:focus {
  border: 1px solid #256e88;
}
form input:focus::-webkit-input-placeholder, form textarea:focus::-webkit-input-placeholder {
  opacity: 0;
}
form input:focus::-moz-placeholder, form textarea:focus::-moz-placeholder {
  opacity: 0;
}
form input:focus:-moz-placeholder, form textarea:focus:-moz-placeholder {
  opacity: 0;
}
form input:focus:-ms-input-placeholder, form textarea:focus:-ms-input-placeholder {
  opacity: 0;
}
form textarea {
  height: 143px;
}
form a.button {
  width: 100%;
  color: #fff;
  float: right;
  margin-top: 3px;
  cursor: pointer;
  background-color: #256e88;
  border: 2px solid #256e88;
  text-transform: uppercase;
  text-align: center;
  padding: 15px;
}
form a.button:hover {
  color: #256e88;
  background-color: #fff;
}
form a.button:-webkit-autofill {
  box-shadow: inset 0 0 0 50px #fff;
  color: #333;
}
form a.button.disabled {
  opacity: 0.8;
  cursor: not-allowed;
}


/*Downloaded from https://www.codeseek.co/ESarkisova/form-validation-NyJwpE */
(function( $ ){

  $.fn.esValidator = function() {
  var togler = {};
      
  this.each(function(){
    if($(this).attr('required')){
      togler[$(this).attr('id')] = 0;
    } else {
      togler[$(this).attr('id')] = 1;
    }
  
  });
  
  var submit = $('#submit');
    
  this.unbind().blur( function(){

	var id = $(this).attr('id');
  var val = $(this).val();
  var min = $(this).attr('minlength')||0;
  var max = $(this).attr('maxLenght')||val.length;
  var pattern = new RegExp($(this).attr('pattern')||'.*?');
    


    if ($(this).attr('required')){
      if(val.length >= min && val.length <= max && val != '' && pattern.test(val))
			{
				$(this).removeClass('error').addClass('not_error');
				togler[id] = 1;
       
      }
			else
			{
				$(this).removeClass('not_error').addClass('error');
				$(this).next('.error-box').animate({'paddingLeft':'10px'},400)
                                  .animate({'paddingLeft':'5px'},400);
				togler[id] = 0;
       
			}
    } else {
      if(val === '')
			{
				$(this).removeClass('error').addClass('not_error');
				togler[id] = 1;
      }
      
      else if(val.length >= min && val.length <= max && val != '' && pattern.test(val))
			{
				$(this).removeClass('error').addClass('not_error');
				togler[id] = 1;
      }
			else
			{
				$(this).removeClass('not_error').addClass('error');
				$(this).next('.error-box').animate({'paddingLeft':'10px'},400)
                                  .animate({'paddingLeft':'5px'},400);
				togler[id] = 0;
			}
      
    }
	
  var t=1; 
	jQuery.each(togler, function(i, val){
    t*=val;
    console.log(val);
  });
   
	t!= 0?submit.removeClass('disabled'):submit.addClass('disabled');

	});
    
 };

})( jQuery );


 $('input#name, input#sname, input#email, input#phone, textarea#message').esValidator();
 $("#phone").mask("7(999)999-99-99");

Comments