Предотвратить кнопку jquery

Я использую jQuery для min и maxlength. Я хочу здесь, чтобы предотвратить кнопку, если minlength не является правильным. Я имею в виду, если пользователь не ввел минимум 8 цифр, то кнопка предотвращения.

jQuery:

var minLength = '8';
var maxLength = '13';
$("input[name=354]").keypress(function(){
    if(this.value.length > maxLength) {
        this.value = this.value.slice(0, maxLength);
    }
    if(this.value.length < minLength) {
        $(this).css('border','1px solid #f00');
    } else {
        $(this).css('border-color','#cfdadd');
    }
});

HTML код кнопки:

<button type="button" class="btn next">Next</button>

2 ответа

  1. Я думаю, что вам нужно использовать disabled.

    И было бы лучше использовать inputвместо keypress.

    var minLength = '8';
    var maxLength = '13';
    
    $('input[name=354]').on('input', function() {
      if (this.value.length > maxLength) {
        this.value = this.value.slice(0, maxLength);
      }
      if (this.value.length < minLength) {
      	if (!$(this).hasClass('invalid')) {
        	$(this).addClass('invalid');
        }
        $('.btn').attr('disabled', true);
      } else {
      	$(this).removeClass('invalid');
        $('.btn').attr('disabled', false);
      }
    });
    .invalid {
      border:1px solid #f00;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input class="invalid" name="354" type="text">
    <button type="button" class="btn next" disabled>Next</button>

    Вот скрипка

  2. Вы можете добавить disabledатрибут к кнопке, если длина ввода недопустима.

    var minLength = "5";
    var maxLength = "10";
    $("input").on("keydown change", function(){
        var value = $(this).val();
        
        // length is short
        if (minLength > value.length){
            $("button").attr("disabled", true);
            $(this).addClass("error");  
        } else {
            $("button").attr("disabled", false);
            $(this).removeClass("error");  
        }
        
        // length is long
        if (value.length > maxLength)
            this.value = value.slice(0, maxLength);    
    });
    .error {
        border: 2px solid rgba(255, 0, 0, 0.48);
        box-shadow: 0px 0px 2px -1px red;  
        outline: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
        <input type="number" class="error" />
        <button type="submit" disabled>Submit</button>
    </form>