在提交表单之前检查条件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>