Jquery 如果条件为假，如何防止提交HTML表单？

我有一个简单的

@Html.BeginForm（）

，其中包含一些隐藏字段，如下所示：

@using (Html.BeginForm("AddToCart", "ShoppingCart", new { id = Model.ProductID }))
 {
   @Html.HiddenFor(m => m.SelectedQuantity, new { @id = "selectedquantity" })
   @Html.HiddenFor(m => m.AvailableColors, new { @id = "selectedcolor" })
   @Html.HiddenFor(m => m.SelectedSizes, new { @id = "selectedsize"})
   @Html.HiddenFor(x => x.ProductID)
   @Html.Hidden("returnUrl", Request.Url.PathAndQuery)

   <input id="submit" type="submit" class="btn btn-primary" value="Add to cart" />
 }

@使用（Html.BeginForm（“AddToCart”，“ShoppingCart”，new{id=Model.ProductID}））
{
@Html.HiddenFor（m=>m.SelectedQuantity，new{@id=“SelectedQuantity”}）
@Html.HiddenFor（m=>m.AvailableColors，新的{@id=“selectedcolor”}）
@Html.HiddenFor（m=>m.selectedsize，新的{@id=“selectedsize”}）
@Html.HiddenFor（x=>x.ProductID）
@隐藏（“returnUrl”，Request.Url.PathAndQuery）
}

我想防止表单在隐藏字段值为空时提交，这可能吗？如果是，怎么做？ 隐藏字段值由下面的脚本更新

<script type="text/javascript">
    $(function () {
        $("#quantity").on("change", function () {
            var quantity = $(this).val();
            $("#selectedquantity").val(quantity).val();
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#selectable").selectable({
            selected: function (event, ui) {
                $(ui.selected).siblings().removeClass("ui-selected");
                $("#selectedsize").val($("#selectable>li.ui-selected").html());
            }
        });

        $("#selectable1").selectable({
            selected: function (event, ci) {
                $(ci.selected).siblings().removeClass("ui-selected");
                $("#selectedcolor").val($("#selectable1>li.ui-selected").html());
            }
        });

    });
</script>

$（函数（）{
$（“#数量”）。关于（“更改”，函数（）{
变量数量=$（this.val（）；
$（“#selectedquantity”）.val（quantity.val（）；
});
});
$（文档）.ready（函数（）{
$（“#可选”）。可选({
所选：功能（事件、用户界面）{
$（ui.selected）.sides（）.removeClass（“ui selected”）；
$（“#selectedsize”）.val（$（“#selectable>li.ui selected”）.html（）；
}
});
$（“#可选择1”）。可选择({
所选：功能（事件、ci）{
$（ci.selected）.sides（）.removeClass（“ui selected”）；
$（“#selectedcolor”）.val（$（“#selectable1>li.ui selected”）.html（））；
}
});
});

您可以在表单中添加“onsubmit”

@using (Html.BeginForm("AddToCart", "ShoppingCart", new { id = Model.ProductID, onsubmit = "validateForm()" }))

然后声明函数

validateForm

如下：

function validateForm(event) {
  event.preventDefault();
  if ($("#selectedquantity").val() === '' || $("#selectedcolor").val() === '' || $("#selectedsize").val() === '') {
    return false;
  }
  return true;
}

---

更一般地说，只要验证函数返回

false

，您的表单就不会被提交。

我这样做了，但它仍然在提交表单！是否调用了validateForm函数？如何检查？调试？是的，使用调试器或仅使用console.log来确保它被调用。当我检查时，请查看更新问题。