は、テキストボックスのすべての条件が満たされた場合にのみ送信ボタンを有効にします。

Question

両方の条件が満たされている場合にのみ送信ボタンを有効にします。 今のところ、最初のフィールドに値を入力すると、一度有効になり次のフィールドに移動すると再び無効になり、有効になります。入力フィールドの条件が満たされていないと有効になります。

$('#accinput').on('keyup paste',username_check); 
 
$('#Cusinput').on('keyup paste',username_check1); 
 

 
function username_check(){ 
 

 
    var username = $('#accinput').val(); 
 
    setTimeout(function() { 
 
username = $('#accinput').val(); 
 
if(username === "" || username.length < 4){ 
 
    $("#btnsubmit").prop('disabled', true); 
 
} 
 
else{ 
 
    $("#btnsubmit").prop('disabled', false); 
 
} 
 
    },100); 
 

 
} 
 

 
function username_check1(){ 
 
    var username = $('#Cusinput').val(); 
 
    setTimeout(function() { 
 
username = $('#Cusinput').val(); 
 
if(username === "" || username.length < 3){ 
 
$("#btnsubmit").prop('disabled', true); 
 
} 
 
else{ 
 
    $("#btnsubmit").prop('disabled', false); 
 
} 
 
    },100); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 
<input type="text" class="btn btn-info" id="accinput" required/> 
 

 
    <input type="text" class="btn btn-info" id="Cusinput" required> 
 

 
    <input type="submit" class="btn btn-info" value="Submit Button" id="btnsubmit" >

Answer 1

ここには小さなコードがあります。関数を呼び出すテキストフィールドにinputイベントが必要であり、必要な条件チェックを行う必要があります。このコードは、動的要素がある場合や、質問に提供されているサンプルコードよりも少数の要素がある場合に機能します。あなただけの彼らは、クラス名form-field持つべきであることを保証する必要があります。

$('.form-field').on('input', checkAndEnableButton); 
 

 
$(document).ready(function() { 
 
    $("#btnsubmit").prop('disabled', true); 
 
}); 
 

 
function checkAndEnableButton() { 
 
    $("#btnsubmit").prop('disabled', true); 
 
    var breakFlag = false; 
 
    var enteredVal = ''; 
 
    $('.form-field').each(function() { 
 
    enteredVal = $(this).val(); 
 
    if (enteredVal == '' || enteredVal.length < 4) 
 
     breakFlag = true; 
 
    }); 
 

 
    if (!breakFlag) { 
 
    $("#btnsubmit").prop('disabled', false); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 
<input type="text" class="btn btn-info form-field" id="accinput" required/> 
 

 
<input type="text" class="btn btn-info form-field" id="Cusinput" required> 
 

 
<input type="submit" class="btn btn-info" value="Submit Button" id="btnsubmit">

Answer 2

使用.attr()と.removeAttr()：

function validate() { 
 
    var inputs = $('input[type="text"]'); 
 
    if ($.grep(inputs, i => $(i).val().length > 3).length === inputs.length) { 
 
    $("#btnsubmit").removeAttr('disabled'); 
 
    } else { 
 
    $("#btnsubmit").attr('disabled', 'disabled'); 
 
    } 
 
} 
 

 
$('input[type="text"]').on('input', validate); 
 
$('#add-input').on('click', function() { 
 
    var newInput = $('<input type="text" required">'); 
 
    newInput.on('input', validate); 
 
    $("#btnsubmit").before(newInput); 
 
    validate(); 
 
}); 
 
validate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" required> 
 
    <input type="text" required> 
 
    <input type="submit" value="Submit Button" id="btnsubmit"> 
 
</div> 
 
<button id="add-input">Add input field</button>

さて、それはinput[type="text"]要素の任意の数で動作します。もちろん、そのセレクタを変更することができます。たとえば、気になる入力要素をすべてmin-lengthクラスに指定し、.min-lengthを選択します。

Answer 3

検証に2つの関数を使用する代わりに、両方のフィールドをチェックする単一関数にコードを移動します。両方のフィールドが有効な場合は、ボタンを有効にします。