javascript - 添加禁用提交按钮的 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

去掉onclick

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

改为

<input id="Submit1" type="submit" value="Submit" />

并且您需要将脚本更改为

<script>
 $(document).ready(function(){
 checkEmpty()
 })

 $('input').change(function() {
     checkEmpty();
 });

 function checkEmpty(){

  var s = $("#uInputS").val();
 var a = $("#uInputA").val();
 if ((s && a)) {

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

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

 }
 }
</script>