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

Answer 2

在调用提交处理程序时禁用按钮，请参见jquery api here

  $( "#your_form_id" ).submit(function(event) { // Handler for .submit() called.
     $('#Submit1').prop('disabled', true);
 });

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

2 个答案: