JSFiddle - React, Tailwind, and code Playground

by zhukovroman

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<a href="#" id="comment" class="btn btn-primary">Оставить комментарий</a>
    
      <div id="commentDiv" style="display:none;">
        <form>
          <textarea id="area"></textarea>
          <div id="info" style="float:right;">
            <span>
              <span class="value_message">10 символов нужно ввести</span>
            </span>
            <input type="submit" value="Комментировать" disabled>
            <input type="reset" value="Сбросить">
          </div>
        </form>
      </div>

JavaScript

$(document).ready(function() {
    $("#comment").click(function() {
        $("#comment").fadeOut('slow');
        $('#commentDiv').fadeIn('slow');
    });


    $('#area').on('keyup', function() {
        var minLength = 10,
            maxLength = 590,
            current = $('#area').val().length;

        if (current < minLength) {
            $('.value_message').html((minLength - current) + ' символов нужно ввести');
            $(':submit').attr("disabled", '');
        }
        
        if (current >= minLength) {
            $('.value_message').html((maxLength - current) + ' символов можно ввести');
            $(':submit').removeAttr("disabled");
        }
    })

});