輸入驗證不能超過初始值jQuery

Question

我有兩個需要驗證的輸入字段，但我無法存儲其中一個字段的初始值。

例如第一個字段的值爲10，因此輸入不能大於10

我的想法是讓價值的onfocus並將其存儲在一個全局變量，但是變量在不斷變化。

進行驗證的兩個功能只是爲了檢查ammount的有效

var original_amount; 
var original_purchprice; 

    $('#order').on({ 
     focus: function() { 
      original_amount = $('.order_amount').val(); 
      original_purchprice = $('.order_purchprice').val(); 
     }, 
     keyup: function() { 
      var amount = $('.order_amount').val(); 
      var purchprice = $('.order_purchprice').val(); 
      var isValid_amount = true; 
      var isValid_purchprice = true; 

      if(!isValidAmmount(amount) || (amount > original_amount)){ 
       isValid_amount = false; 
      } 

      if(!roundPositiveNumber(purchprice)){ 
       isValid_purchprice = false; 
      } 

      if(isValid_amount == true && isValid_purchprice == true) { 
       $('#save_order').prop('disabled', false); 
      } else { 
       $('#save_order').prop('disabled', true); 
      } 
     } 
    }, '.order_amount, .order_purchprice'); 

HTML

<input type='text' class='order_amount' value=10> 
<input type='text' class='order_purchprice'value=69.95> 

Answer 1

您可以使用jQuery data法（https://api.jquery.com/jquery.data/）存儲每個輸入的原始值。

然後收聽keyup事件並將輸入的當前值與初始值進行比較。

$(document).ready(function() { 

    $('.order_amount').each(function(){ 
     $(this).data('original_amount', $(this).val()); 
    }); 

    $('.order_purchprice').each(function(){ 
     $(this).data('original_purchprice', $(this).val()); 
    }); 

    $('#order').on({ 
     keyup: function() { 

      var $current_input = $(this); 
      var current_amount = $current_input.val(); 
      var original_amount = $current_input.data('original_amount'); 

      // other logic goes here 
     } 
    }, '.order_amount, .order_purchprice'); 

}); 

這裏的小提琴：https://jsfiddle.net/c07mc2L1/13/。