ボタンのjqueryを防止する

Question

私はminとmaxlengthにjQueryを使用しています。私は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>

Answer 1

です。

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>

Answer 2

私はあなたがdisabledを使用する必要があると思います。

keypressの代わりにinputを使用する方がよいでしょう。

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) { 
 
    \t if (!$(this).hasClass('invalid')) { 
 
    \t $(this).addClass('invalid'); 
 
    } 
 
    $('.btn').attr('disabled', true); 
 
    } else { 
 
    \t $(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>

ここでは入力の長さが有効でない場合は、ボタンにdisabled属性を追加することができますfiddle