All geek questions in one place

Disable Apply to the limit of the number of input characters

I have my solution working 90% and the Submit button disables when the user enters more valid characters, but as soon as the user clicks on the next input, the button turns on again.

Below I tried to add an if statement, but it doesn't seem to make any difference. Help would be greatly appreciated. also there is a lot of code that is repeated for the three inputs to limit the characters as their number is different, id is there a better way to write 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/

+4
source share
7 answers

I updated your fiddle:

, .

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>
Hide result
+2

+ input keydown - .

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();
+2

, , . , .

. keydown , . input. , DRY-up, . data, . :

function characterLimit() {
  $('.char-limit').after(function() {
    return '<p><span class="max">' + $(this).data('charlimit') + '</span> characters remaining</p>';
  }).on('input', function() {
    var $el = $(this);
    var limit = $el.data('charlimit');
    var remaining = limit - this.value.length;

    $el.next('p').find('.max').text(remaining);
    $el.toggleClass('invalid', remaining < 0);

    $('#submitBtn').prop('disabled', $('.char-limit.invalid').length != 0);
  });
}

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" class="char-limit" type="text" data-charlimit="20">
      </li>
      <li>
        <input id="createDealRibbon" class="char-limit" type="text" data-charlimit="15">
      </li>
      <li>
        <textarea id="createDealDescription" class="char-limit" type="text" rows="10" cols="50" data-charlimit="120"></textarea>
      </li>
      <li>
        <input id="submitBtn" type="submit" value="Send Message">
      </li>
    </ul>
  </form>
</div>
Hide result
+2

, , Boolean, .

, , .

:

, :

var exceededTitle = false;
var exceededRibbon = false;
var exceededDescription = false;

// Then inside keydown:

inputRibbon.keydown(function(){
  ...
  if(exceededTitle || exceededRibbon || exceededDescription)
    // Disable submit
  ...
+1

inputTitle.keydown(), inputDescription.keydown() inputRibbon.keydown(). , , , . , if-else .

+1

:

disable or enable the button if you have a class of errors on the page / form:

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 input = $('#createDealTitle,#createDealRibbon,#createDealDescription');

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

  // Title Input

  input.keydown(function() {
    var textLength = $(this).val().length;
    var dh = $(this).next().find('span');
    var max = dh.text();
    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');
    }
    if ($('.error-input').length) {
      btnSubmit.attr('disabled', true).addClass('disabled');//disable the input if a error exist
    } else {
      btnSubmit.attr('disabled', false).removeClass('disabled');//enable the button if there are no errors on the page
    }
  });       

}

characterLimit();

demo: https://jsfiddle.net/gkvLxygs/1/

+1
source

You can use a boolean to decide whether to enable / disable a button.

var buttonEnabled = false;

if (textLength > headingMax) {

  buttonEnabled = false;
  toggleButtonEnabled(buttonEnabled);

} else {

  buttonEnabled = true;
  toggleButtonEnabled(buttonEnabled);
}

Then call this function every time you want to enable / disable the button:

function toggleButtonEnabled(isEnabled){
    btnSubmit.attr('disabled', isEnabled);
    if(isEnabled){
        btnSubmit.removeClass('disabled');
    }else{
        btnSubmit.addClass('disabled');
    }
}

This way you will always have one function to control the button.

+1
source

Source: https://habr.com/ru/post/1669352/

More articles:


All Articles