2つの入力を検証する

Question

私はアプリケーションを開発していましたが、ボタンへの2つの入力を確認するのに驚いています。removeClass

$('input#firstInput').blur(function(){ 
 
    tmpval2 = $('input#secondInput').val(); 
 
    tmpval = $(this).val(); 
 
\t 
 
    if(tmpval == '') { 
 
     $("#myButton").addClass('disabled') 
 
    } 
 
    else if(tmpval2 == ''){ 
 
     $("#myButton").addClass('disabled') 
 
    } else { 
 
     $("#myButton").removeClass('disabled') 
 
    } 
 
});

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

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
    
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title"> Validate Two Inputs</h3> 
 
     </div> 
 
    
 
    
 
    <div class="panel-body"> 
 
     <input type="text" id="firstInput" placeholder="First Value" /> 
 
     <br><br> 
 
     <input type="text" id="secondInput" placeholder="Second Value" /> 
 
     <br><br> 
 
     <button id="myButton" class="btn btn-success disabled"> Send 
 
     </button> 
 
    </div> 
 
    
 
    
 
    </div> 
 
    
 
    
 
    </div> 
 
    </div> 
 
</div>

ここで私はそのために開発されたどのようなコードです。

Fiddle Link

Answer 1

おそらくは、第1の入力の値または第二の入力かどうかをチェックし、その後、キー押下をリッスンする必要があります空です。そうであれば、ボタンを無効にします。それ以外の場合は、両方の入力に値が設定されているため、無効なクラスを削除できます。

HTMLの唯一の変更点は、チェックする必要のあるすべての入力フィールドにクラスinput-fieldを追加したことです。

$('.input-field').keyup(function() { 
 
    var firstValue = $('#firstInput').val(), 
 
     secondValue = $('#secondInput').val(); 
 

 
    if (firstValue == '' || secondValue == '') { 
 
     $("#myButton").addClass('disabled'); 
 
    } else { 
 
     $("#myButton").removeClass('disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title"> Validate Two Inputs</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <input type="text" class="input-field" id="firstInput" placeholder="First Value" /> 
 
      <br><br> 
 
      <input type="text" class="input-field" id="secondInput" placeholder="Second Value" /> 
 
      <br><br> 
 
      <button id="myButton" class="btn btn-success disabled">Send</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ファーストクラスを削除し、後でそれはあなたが変更イベントでそれを行う必要があり、一度

$('.inputs').change(function() { 
 
    $("#myButton").removeClass('disabled'); 
 

 
    var isValid = false; 
 

 
    $('.inputs').each(function() { 
 
    if ($(this).val() && $(this).val().length) { 
 
     isValid = true; 
 

 
     return false; // same as break; 
 
    } 
 
    }); 
 

 
    if (!isValid) { 
 
    $("#myButton").addClass('disabled') 
 
    } 
 
});

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

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title"> Validate Two Inputs</h3> 
 
     </div> 
 

 

 
     <div class="panel-body"> 
 
      <input type="text" class="inputs" placeholder="First Value" /> 
 
      <br><br> 
 
      <input type="text" class="inputs" placeholder="Second Value" /> 
 
      <br><br> 
 
      <button id="myButton" class="btn btn-success disabled"> Send 
 
     </button> 
 
     </div> 
 

 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div>

Answer 3

で両方の入力をチェックする追加。 私の解決策がある - 高速:)

例：

$('input.required').keyup(function(){ 

/* Validate all required fields */ 
var err = 0; 
$('input.required').each(function(){ 
    var input = $(this); 
    if(input.val().length == 0){ 
    err++; 
    } 
}); 

if(!err){ 
    $('#myButton').removeClass('disabled'); 
} 
}); 

https://jsfiddle.net/kgynth5x/11/

Answer 4

このコードを試してみてくださいまたはフィドルリンク

JSFiddle

JavaScriptコードの下に通過 -

$('input').blur(function(){ 
     $("#myButton").removeClass('disabled'); 
     tmpval = $(this).val(); 
     if(tmpval == '') { 
      $("#myButton").addClass('disabled'); 
     } 
     if($(this).siblings('input').val() == ''){ 
     $("#myButton").addClass('disabled'); 
     } 
    }); 

Answer 5

チェックこれはあなたの問題を解決する可能性がある場合

の

おかげ

$('input#firstInput').keyup(function(){ 
 
\t \t var tmpval = $(this).val(); 
 
    var tmpval1 = ""; 
 
    $('input#secondInput').keyup(function(){ 
 
     tmpval1 = $(this).val(); 
 
     checkValid(tmpval,tmpval1); 
 
    }); 
 
    checkValid(tmpval,tmpval1); 
 
}); 
 

 
function checkValid(tmpval,tmpval1){ 
 
    if(tmpval == '' || tmpval1 == '') { 
 
\t   $("#myButton").addClass('disabled') 
 
\t } 
 
    else { 
 
     $("#myButton").removeClass('disabled') 
 
    } 
 
}

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

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
    
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title"> Validate Two Inputs</h3> 
 
     </div> 
 
    
 
    
 
    <div class="panel-body"> 
 
     <input type="text" id="firstInput" placeholder="First Value" /> 
 
     <br><br> 
 
     <input type="text" id="secondInput" placeholder="Second Value" /> 
 
     <br><br> 
 
     <button id="myButton" class="btn btn-success disabled"> Send 
 
     </button> 
 
    </div> 
 
    
 
    
 
    </div> 
 
    
 
    
 
    </div> 
 
    </div> 
 
</div>