如何在購物車中提交之前檢查有效的整數數量

Question

使用以下代碼定義購物車數量輸入表格。 數量最初必須為空。

表單是使用jquery post（）通過ajax提交的。

提交前如何檢查數量是否大於0的整數？

我在下面嘗試了代碼，但警報框返回[htmlinputelement]，因此檢查失敗。

    <form class='browse-addtocart-form' action="<%= Url.Action("AddToCartPost", "Store")%>" method="post">
       <input class='amount ui-corner-all' name="quantity" type="number" value=""
     size="3" min="0" step="1" /></span>
    <input type="submit" value="Add to cart" />
       </form>
  <script>    
    $(function() {
$(".browse-addtocart-form").submit(function(event){
    var $form = $(this);
    var serializedData = $form.serialize();
    alert($form[0].quantity);
    if ($form[0].quantity==="" || $form[0].quantity==="0") {
      alert('Please fill quantity with non zero integer');
      event.preventDefault();
      return;
      }
    $.post('<%= Url.Action("AddToCart", "Store")%>',
      serializedData, function(response) {
          $("#cart-status").text(response.Total);
          showMessage(response.Message);
          showFadeOutMessage(response.Message);
        }));
   event.preventDefault();
  });
  });
      </script>

使用了jquery，jquery UI，ASP.NET MVC2。

Answer 1

關於event.preventDefault();小注釋 。 您可以返回false；這也將停止發送您的帖子，您甚至不需要event參數。

由於您已經有var serializedData = $form.serialize(); ，我建議您使用serializedData.quantity從其中提取“數量”。

Answer 2

最簡單的方法是調用parseInt並檢查它是否不返回NaN。

var q = parseInt($form[0].quantity, 10);
if(isNaN(q) || q === 0){
  alert('Please fill quantity with non zero integer');
}

編輯以將base = 10添加到parseInt，並使用isNaN（）。 如果不添加以10為底的顯式基數，則parseInt會將將以零開頭的字符串誤認為八進制數，對於十六進制則相同。

Answer 3

嘗試

$(function() {
    $(".browse-addtocart-form").submit(function(event) {
        var $form = $(this);
        var serializedData = $form.serialize();
        if (this.quantity.value === "" || this.quantity.value === "0") {
            alert('Please fill quantity with non zero integer');
            return false;
        }
        $.post('<%= Url.Action("AddToCart", "Store")%>',
                serializedData, function(response) {
                    $("#cart-status").text(response.Total);
                    showMessage(response.Message);
                    showFadeOutMessage(response.Message);
                });
        return false;
    });
});