javascript - Disable Submit on input character count limit - Stack Overflow

admin管理员组

文章数量:1336293

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

/

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/gavinthebarbarian/5n9d1Lq2/

• javascript
• jquery

Share Follow asked Feb 10, 2017 at 9:39 Gavin WoodGavin Wood 1,00433 gold badges1515 silver badges3232 bronze badges 2

• Does this help? - jsfiddle/5n9d1Lq2/2 – Developer Commented Feb 10, 2017 at 9:49
• Why don't you just use maxlength='20', maxlength='15', and maxlength='110' attribute? – zer00ne Commented Feb 10, 2017 at 10:43

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

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./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>

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

https://jsfiddle/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();

The issue with your logic is that it only inspects the input which was last typed in to. If that bees a valid length again it automatically enables the submit regardless of the state of the other inputs.

There are some issues with your code though. Your use of keydown means that the counter ignores the first character you type. Try using input instead. Also, your code could also do with DRYing up as it repeats itself for every control. You can use a mixture of classes and data attributes to make a single event handler work for all the elements. Try this:

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./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>

You are controlling submit button from 3 places inputTitle.keydown() , inputDescription.keydown() and inputRibbon.keydown(). This means that every time you want to enable submit button you only check one out of three conditions. Before you enable it you should check all three conditions in every if-else block in all of your three listeners.

You need to modify your condition to disable the submit button to include a Boolean that represents the current disabled state of the other text inputs.

Otherwise, the submit button with re-enable if you start typing in another text input that hasn't exceeded character length.

---

Solution:

If the other inputs exceeds the length, then the condition should fail automatically:

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

// Then inside keydown:

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

Try the following:

disabled or enable the button if you have a error class 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/gkvLxygs/1/

You could use a Boolean variable to decide whether the button should be enabled / disabled.

var buttonEnabled = false;

if (textLength > headingMax) {

  buttonEnabled = false;
  toggleButtonEnabled(buttonEnabled);

} else {

  buttonEnabled = true;
  toggleButtonEnabled(buttonEnabled);
}

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

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

That way, you'll always have one function to control the button.

本文标签： javascriptDisable Submit on input character count limitStack Overflow