驗證兩個輸入

我正在開發一個應用程序，因爲我在驗證兩個輸入到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

來源

2017-04-26 Riot Zeast Captain

你也許應該監聽按鍵，然後檢查是否第一個輸入的值或第二輸入是空的。如果是，則禁用該按鈕。否則，兩個輸入都有值，所以禁用的類可以被刪除。

對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>

來源

2017-04-26 12:04:50

它的檢查只有當值存在時，如果它仍然是空的我仍然可以點擊發送'按鈕' –

@RiotZeastCaptain對不起，錯字。應該已經keyup不按鍵 –

首先拆下類和以後添加一次

$('.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>

來源

2017-04-26 12:00:01 Justinas

兩個輸入沒有驗證。 –

僅適用於一個輸入字段，如果用戶退回輸入字段中的字符，則不起作用。最初可能會使isValid爲真。如果一個字段爲空，請將其設置爲false，然後檢查 –

兩種情況下我需要的 –

你需要做的是對變化事件檢查兩個輸入端。有我的解決方案 - 快:)

例子：

$('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/

來源

2017-04-26 12:03:13

尼斯解決方案！一個問題是，當用戶從字段中刪除所有字符時，該按鈕仍然是可點擊的 –

其簡單修復它:) $（'＃myButton'）。prop（'disabled'，true）; 刪除類後將其設置爲false :) –

完整的工作示例：https：// jsfiddle。淨/ kgynth5x/11/ –

試試這個代碼或低於小提琴鏈接

JSFiddle

JavaScript代碼經過 -

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

來源

2017-04-26 12:11:57

看起來簡單，最好 –

@RiotZeastCaptain高興地幫助你:) –

如果你有一些其他輸入，如*記住我* – Justinas

檢查這可能會解決您的問題

由於

$('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>

來源

2017-04-26 12:17:19

驗證兩個輸入

回答

相關問題