JSFiddle - React, Tailwind, and code Playground

by z0ddak

HTML

<form class="form-register" id="k_qst_20" action="" method="post">

  <!-- ПОЛЕ ЛОГИНА -->
  <p>&nbsp;</p>
  <div class="form-title">ваш логин <span id="val-log"></span><span id="inval-log"></span><span id="username_result"></span></div>
  <input class="form-field login" type="text" id="k_input_field_20_1470" value="">

  <!-- ПОЛЕ ЯЩИКА -->
  <p>&nbsp;</p>
  <div class="form-title">ваш e-mail <span id="val-email"></span><span id="inval-email"></span><span id="email_result"></span></div>
  <input class="form-field email" type="text" id="k_input_field_20_442" value="">

  <!-- ЧЕКБОКС СОГЛАШЕНИЯ --> 
  <input type="checkbox" name="checkme" id="agree" />
  <label for="agree" class="inline">Согласен с условиями</label>
  <p>&nbsp;</p>

   <!-- КНОПКА Зарегистрировать --> 
  <input class="submit-button" type="button" id="k_savebutton20" value="ЗАРЕГИСТРИРОВАТЬ" />

      <form />

CSS

/* Проверка логина и e-mail */
.form-title #val-log, .form-title #val-email {
   margin-bottom: 5px;
   font-size: 16px;
   color: #569b44;
   font-weight: normal;
   text-shadow: #ebebeb 0 1px 0;
}
.form-title #inval-log, .form-title #inval-email {
   margin-bottom: 5px;
   font-size: 16px;
   color: #ff0000;
   font-weight: normal;
   text-shadow: #ebebeb 0 1px 0;
}

#username_result, #email_result{
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: normal;
    text-shadow: #ebebeb 0 1px 0;
}

JavaScript

//// КОНСТРУКЦИЯ №1 - Проверка логина и ящика по маскам, с выводом результата
//----------------------------------------------------------------------------
    $('.login').blur(function() {
        if($(this).val() != '') {
            var pattern = /^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/i;
            if(pattern.test($(this).val())){
                $(this).css({'border' : '2px solid #569b44'});
                $('#inval-log').text('');
                $('#val-log').text(' корректен').fadeIn(400);
                setTimeout(function(){
                  $('#val-log').fadeOut(400);
                },2000);
            } else {
                $(this).css({'border' : '2px solid #ff0000'});
                $('#val-log').text('');
                $('#inval-log').text(' не корректен').fadeIn(400);
                setTimeout(function(){
                  $('#inval-log').fadeOut(400);
                },2000);
            }
        } else {
            $(this).css({'border' : '2px solid #ff0000'});
            $('#val-log').text('');
        }
    });
 
    $('.email').blur(function() {
        if($(this).val() != '') {
            var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
            if(pattern.test($(this).val())){
                $(this).css({'border' : '2px solid #569b44'});
                $('#inval-email').text('');
                $('#val-email').text(' корректен').fadeIn(400);
                setTimeout(function(){
                  $('#val-email').fadeOut(400);
                },2000);
            } else {
                $(this).css({'border' : '2px solid #ff0000'});
                $('#val-email').text('');
                $('#inval-email').text(' не корректен').fadeIn(400);
                setTimeout(function(){
                  $('#inval-email').fadeOut(400);
                },2000);
            }
        } else {
            $(this).css({'border' : '2px solid #ff0000'});
            $('#val-email').text('');
        }
    });
...