添加禁用提交按钮的 javascript 时，客户端验证消息不显示

Question

我的 MVC 应用程序中有一个带有 2 个下拉字段和一个提交按钮的简单表单。我启用了客户端验证，它工作正常。我现在添加了一个 javascript 来禁用提交按钮，以防止表单被提交两次。由于某种未知原因，当我添加此脚本时，客户端验证消息没有显示。

这是我的表格：

    @using (Html.BeginForm("Recycle", "GetList", FormMethod.Post, new { id = "myForm" }))

    {

        <!-- Server list -->

        <div>

            <span>Site type:&nbsp;</span>

            @Html.DropDownListFor(m => m.uInputS, new List<SelectListItem>

            {

                new SelectListItem {Text = "text", Value = "value" },

                new SelectListItem {Text = "text", Value = "value" }

            }, "Select site type")

            @Html.ValidationMessageFor(m => m.uInputS, "", new { @class = "error" })

        </div>

        <!-- Application list -->

        <br />

        <div>

            <span>Application:&nbsp;</span>

            @Html.DropDownListFor(m => m.uInputA, new SelectList(string.Empty, "Value"))

            @Html.ValidationMessageFor(m => m.uInputA, "", new { @class = "error" })

        </div>

        <br />

        <!-- Submit-->

        <div>

            <input id="Submit1" type="submit" value="Submit" onclick="return FreezeSubmit();" />

        </div>

    }

下面是我用来禁用提交按钮的 jquery。

<script>

 function FreezeSubmit() {

 var s = $("#uInputS").val();

 var a = $("#uInputA").val();

 if ((s && a)) {

    $('#myForm').submit();

    $('#Submit1').prop('disabled', true);

    return true;

 }

 else {

    $('#Submit1').prop('disabled', false);

    return false;

 }

}

</script>

这是我的模型：

    public class GetList

    {

      [Required(ErrorMessage = "Please select site type")]

      public string uInputS { get; set; }

      [Required(ErrorMessage = "Please select application name")]

      public string uInputA { get; set; }

    }

我对编程很陌生，我无法弄清楚为什么客户端验证消息无法显示，因为我添加了一些 javascript。任何帮助表示赞赏。谢谢！

Answer 1

移除点击进入<input id="Submit1" type="submit" value="Submit" onclick="return FreezeSubmit();" />改成<input id="Submit1" type="submit" value="Submit" />并且您需要将脚本更改为<script>&nbsp;$(document).ready(function(){&nbsp;checkEmpty()&nbsp;})&nbsp;$('input').change(function() {&nbsp; &nbsp; &nbsp;checkEmpty();&nbsp;});&nbsp;function checkEmpty(){&nbsp; var s = $("#uInputS").val();&nbsp;var a = $("#uInputA").val();&nbsp;if ((s && a)) {&nbsp; &nbsp; $('#Submit1').prop('disabled', true);&nbsp;}&nbsp;else {&nbsp; &nbsp; $('#Submit1').prop('disabled', false);&nbsp;}&nbsp;}</script>

Answer 2

调用提交处理程序时禁用按钮，请参阅此处的jquery api&nbsp; $( "#your_form_id" ).submit(function(event) { // Handler for .submit() called.&nbsp; &nbsp; &nbsp;$('#Submit1').prop('disabled', true);&nbsp;});