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; 

}); 

私が支払わALERT

と合計金額が、条件は、いくつかの時間を働いていない場合に条件が時々私満たされない場合は、それがフォームを送信する：ここでエラーメッセージが私のコードであることを示す必要がありますでも条件が

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) { 
     ... 

あなたが機能を提出し、提出するフォームを避けるために、preventDefaultメソッドを呼び出すにパラメータを追加しのparseInt

Answer 3

を使用することができ小数を使用していない場合は、次のようにのように。

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