Disable Submit on input character count limit

Question

I have my solution working 90%, and the Submit button disables when the user type more that the allowed characters, but as soon as the user clicks into the next input the button is enabled again.

At the bottom i tried to add an if statement but it seems to mak no difference. Help would be greatly appreciated. also there is a lot of code that is being repeated for the three inputs to limit the characters as there amounts differ, id there a better way of writing this?

function characterLimit() {

var headingMax       = 20;
var ribbonMax        = 15;
var descriptionMax   = 120;
var dh               = $('.heading-max');
var dr               = $('.ribbon-max');
var dd               = $('.description-max');
var btnSubmit        = $('#submitBtn');
var inputTitle       = $('#createDealTitle');
var inputRibbon      = $('#createDealRibbon');
var inputDescription = $('#createDealDescription');

dh.html(headingMax);
dr.html(ribbonMax);
dd.html(descriptionMax);

inputTitle.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = headingMax - textLength;

  dh.html(textRemaining);

  if (textLength > headingMax) {
    dh.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');
  }else {
    dh.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

inputRibbon.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = ribbonMax - textLength;

  dr.html(textRemaining);

  if ($(this).val().length > ribbonMax) {
    dr.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');


  }else {
    dr.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

inputDescription.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = descriptionMax - textLength;

  dd.html(textRemaining);

  if ($(this).val().length > descriptionMax) {
    dd.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');
  }else {
    dd.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

if (inputTitle.val().length > headingMax || inputRibbon.val().length  > ribbonMax || inputDescription.val().length > descriptionMax) {
  btnSubmit.attr('disabled', true).addClass('disabled');
}else {
  btnSubmit.attr('disabled', false).removeClass('disabled');

}

}

characterLimit();

https://jsfiddle.net/gavinthebarbarian/5n9d1Lq2/

Answer 1

I updated your fiddle:

your main mistake was, that the last check for all input fields was out of scope.

function characterLimit() {

  var headingMax = 20;
  var ribbonMax = 15;
  var descriptionMax = 120;
  var dh = $('.heading-max');
  var dr = $('.ribbon-max');
  var dd = $('.description-max');
  var btnSubmit = $('#submitBtn');
  var inputTitle = $('#createDealTitle');
  var inputRibbon = $('#createDealRibbon');
  var inputDescription = $('#createDealDescription');

  var input1Isvalid = true;
  var input2Isvalid = true;
  var input3Isvalid = true;

  dh.html(headingMax);
  dr.html(ribbonMax);
  dd.html(descriptionMax);

  // Title Input

  inputTitle.keydown(function() {
    var textLength = $(this).val().length;
    var textRemaining = headingMax - textLength;

    dh.html(textRemaining);
    if (textLength > headingMax ) {
      dh.addClass('error-text');
      $(this).addClass('error-input');
      input1Isvalid = false;

    } else {
      dh.removeClass('error-text');
      $(this).removeClass('error-input');
      input1Isvalid = true;

    }
        checkInput()
  });

  // Ribbon input

  inputRibbon.keydown(function() {
    var textLength = $(this).val().length;
    var textRemaining = ribbonMax - textLength;

    dr.html(textRemaining);

    if ($(this).val().length > ribbonMax) {
      dr.addClass('error-text');
      $(this).addClass('error-input');
      input2Isvalid = false;

    } else {
      dr.removeClass('error-text');
      $(this).removeClass('error-input');
      input2Isvalid = true;
    }
    checkInput()
  });

  // Description Input

  inputDescription.keydown(function() {
    var textLength = $(this).val().length;
    var textRemaining = descriptionMax - textLength;

    dd.html(textRemaining);

    if ($(this).val().length > descriptionMax) {
      dd.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');
      input3Isvalid = false;
    } else {
      dd.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
      input3Isvalid = true;
    }
    checkInput()
  });
  function checkInput(){
    // Disable Submit if any of the input character max lengths are over
    if(!input1Isvalid || !input2Isvalid || !input3Isvalid)
          btnSubmit.attr('disabled', true).addClass('disabled');
    else
          btnSubmit.attr('disabled', false).removeClass('disabled');
  }



}

characterLimit();

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form action="">
    <ul>
      <li>
        <input id="createDealTitle" type="text">
        <p><span class="heading-max"></span> characters remaining</p>
      </li>

      <li>
        <input id="createDealRibbon" type="text">
        <p><span class="ribbon-max"></span> characters remaining</p>
      </li>
      <li>
        <textarea id="createDealDescription" type="text" rows="10" cols="50"></textarea>
        <p><span class="description-max"></span> characters remaining</p>
      </li>
      <li>
        <input id="submitBtn" type="submit" value="Send Message">

      </li>
    </ul>




  </form>
</div>

Answer 2

You just need to bind event to lenght check + I've modified it to input event instead of keydown - its more reliable.

https://jsfiddle.net/5n9d1Lq2/3/

// Limit character counter

function characterLimit() {

  var headingMax = 20;
  var ribbonMax = 15;
  var descriptionMax = 120;
  var dh = $('.heading-max');
  var dr = $('.ribbon-max');
  var dd = $('.description-max');
  var btnSubmit = $('#submitBtn');
  var inputTitle = $('#createDealTitle');
  var inputRibbon = $('#createDealRibbon');
  var inputDescription = $('#createDealDescription');

  dh.html(headingMax);
  dr.html(ribbonMax);
  dd.html(descriptionMax);

  // Title Input

  inputTitle.on('input', function() {
    var textLength = $(this).val().length;
    var textRemaining = headingMax - textLength;

    dh.html(textRemaining);

    if (textLength > headingMax) {
      dh.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');
    } else {
      dh.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
    }

  });

  // Ribbon input

  inputRibbon.on('input', function() {
    var textLength = $(this).val().length;
    var textRemaining = ribbonMax - textLength;

    dr.html(textRemaining);

    if ($(this).val().length > ribbonMax) {
      dr.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');


    } else {
      dr.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
    }

  });

  // Description Input

  inputDescription.on('input', function() {
    var textLength = $(this).val().length;
    var textRemaining = descriptionMax - textLength;

    dd.html(textRemaining);

    if ($(this).val().length > descriptionMax) {
      dd.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');
    } else {
      dd.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
    }

  });

  // Disable Submit if any of the input character max lengths are over

  $(inputTitle, inputRibbon, inputDescription).on('input', function () {
    if (inputTitle.val().length > headingMax || inputRibbon.val().length > ribbonMax || inputDescription.val().length > descriptionMax) {
    btnSubmit.prop('disabled', true).addClass('disabled');
  } else {
    btnSubmit.prop('disabled', false).removeClass('disabled');
  }
  })

}

characterLimit();