Отключить Отправить на лимит количества символов ввода

Question

У меня есть мое решение, работающее на 90%, а кнопка «Отправка» отключается, когда пользователь вводит больше допустимых символов, но как только пользователь нажимает на следующий вход, кнопка снова включается.

В нижней части я попытался добавить оператор if, но, похоже, не имеет никакой разницы. Помощь будет принята с благодарностью. также есть много кода, который повторяется для трех входных данных, чтобы ограничить символы, поскольку там суммы отличаются, и там лучший способ написать это?

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

Я обновил свой скрипку:

ваша главная ошибка была, что последняя проверка на наличие всех полей ввода были из области видимости.

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

Вы должны изменить свое состояние, чтобы отключить кнопку отправки включить Boolean, который представляет текущее отключенное состояние других текстовых входов.

В противном случае кнопка отправки с повторным включением, если вы начнете вводить другой текстовый ввод, который не превысил длину символа.

---

Решение:

Если другие входы превышает длину, то условие должно обязательно автоматически:

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

// Then inside keydown: 

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

Answer 3

Вы контролируете кнопку отправки из 3 мест inputTitle.keydown(), inputDescription.keydown() и inputRibbon.keydown() , Это означает, что каждый раз, когда вы хотите включить кнопку отправки, вы проверяете только одно из трех условий. Прежде чем включить его, вы должны проверить все три условия в каждом блоке if-else у всех трех слушателей.

Answer 4

Вам просто нужно связать событие с проверкой длины + Я изменил его на 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(); 

Answer 5

Проблема с вашей логикой является то, что он проверяет только вход, который был последним напечатанным на сайте. Если это снова становится допустимой длиной, оно автоматически позволяет отправить независимо от состояния других входов.

Есть некоторые проблемы с вашим кодом. Ваше использование 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>

Answer 6

Попробуйте следующее:

отключен или включить кнопку, если у вас есть класс ошибок на странице/форма:

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

демо: https://jsfiddle.net/gkvLxygs/1/

Answer 7

Вы можете использовать Boolean v чтобы решить, следует ли включать/отключать кнопку.

var buttonEnabled = false; 

if (textLength > headingMax) { 

    buttonEnabled = false; 
    toggleButtonEnabled(buttonEnabled); 

} else { 

    buttonEnabled = true; 
    toggleButtonEnabled(buttonEnabled); 
} 

Затем вызовите эту функцию каждый раз вы хотите, чтобы включить/отключить кнопку:

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

Таким образом, вы всегда будете иметь одну функцию управления кнопку.