如果条件不成立，如何防止提交 HTML 表单？

Question

我有一个简单的@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" />
 }

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

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

Answer 1

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

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

然后声明函数validateFormlike：

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

更一般地说，只要您的验证函数返回false，那么您的表单就不会被提交。