在提交表單之前檢查條件jquery

Question

我提交一個基本上是購買發票的frm。在提交表單之前，我想要實現檢查用戶在文本框中沒有輸入超過賬單總額的金額。例如，如果總賬單是300，並且在「付款金額」文本框中，用戶意外地輸入了3000，那麼它應顯示在此錯誤消息是我的代碼：

$("#mainform").submit(function() { 
var total = $("#gtotal").val(); 
var paid = $("#paid").val(); 
alert(paid); 
alert(total); 
if(paid > total) 
{ 

alert("Amount can't be greater than total"); 

return false; 
} 
return true; 

}); 

當我警覺付費和總額他們表現出正確的價值觀，但如果條件不工作有時它提交表單如果條件有時不能滿足我甚至沒有條件滿足

Answer 1

試試這個，它可能工作：

var total = parseInt($("#gtotal").val()); 
var paid = parseInt($("#paid").val()); 

Answer 2

.VAL（）返回一個字符串

轉換支付的總浮動與parseFloat，與isNaN檢查他們，然後進行比較。像這樣：

paid = parseFloat(paid); 
total = parseFloat(total); 
if (!isNaN(paid) && !isNaN(total)) { 
    if (paid > total) { 
     ... 

如果你不使用小數您可以使用parseInt函數

Answer 3

添加上提交功能，並調用了preventDefault方法來避免形式提交的參數。

.submit(function(event) { 
    ... 
if (paid > total) { 
    ... 
    event.preventDefault(); 
} 

Answer 4

有一些條件錯過：

• 空輸入字段
• 不是數字

爲了一個字符串號碼，您可以用加前綴字符串轉換標誌。

一個解決辦法是：

$("#mainform").on('submit', function(e) { 
 
    var total = +$("#gtotal").val(); 
 
    var paid = +$("#paid").val(); 
 
    if (($("#gtotal").val().trim().length == 0) || isNaN(total)) { 
 
     console.log("Please specify total"); 
 
     $("#gtotal").focus(); 
 
     e.preventDefault(); 
 
     // 
 
     // stop function execution.... 
 
     // 
 
     return; 
 
    } 
 
    if (($("#paid").val().trim().length == 0) || isNaN(paid)) { 
 
     console.log("Please specify paid"); 
 
     $("#paid").focus(); 
 
     e.preventDefault(); 
 
     // 
 
     // stop function execution.... 
 
     // 
 
     return; 
 
    } 
 
    if(paid > total) { 
 
     console.log("Amount can't be greater than total"); 
 
     // 
 
     // prevent the submit action 
 
     // 
 
     re.preventDefault(); 
 
    } 
 
});

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

 

 
<form id="mainform" action="http://www.google.com"> 
 
    gtotal: <input id="gtotal" type="text"> 
 
    paid:<input id="paid" type="text"> 
 
    <input type="submit" value="Submit Form"> 
 
</form>