ASP.Net MVC 5 Html.BeginForm onsubmit 和具有所需属性的模型

Posted 2023-05-09

【中文标题】ASP.Net MVC 5 Html.BeginForm onsubmit 和具有所需属性的模型

【英文标题】：ASP.Net MVC 5 Html.BeginForm onsubmit and model with required attribute

【发布时间】：2017-08-22 23:19:41

【问题描述】：

我的模型属性具有必需的属性，但我添加了一个“微调器”以在提交表单中显示处理请求。现在，即使它没有提交表单，它也会显示我创建的“微调器”，并停留在覆盖层上，但具有必需属性的文本框处于焦点。

using (html.BeginForm("Add", "UserAccount", FormMethod.Post, new  onsubmit="spinner()"))

//Html.TextBoxes for model properties with required

<div id="spinner" hidden="">
    <div>
        <i class="fa fa-spinner fa-spin fa-pulse" style="color: white; font-    size: 50px;"></i>
        <label style="color: white; font-size: 50px;">Processing</label>
    </div>
</div>




<script>
function spinner() 
    $("#spinner").show();

</script>

在访问 onsubmit 函数之前，他们是否可以先检查“必需”属性是否满足？

【参考方案1】：

您需要将 submitHandler 函数添加到 validator。 Here 是完整的代码。

<script type="text/javascript">
   $(function () 

      $("form").data("validator").settings.submitHandler = function (form) 
         $("#submit-button").html("<i class=\"fa fa-spinner fa-pulse\"></i> Signing In...")
            .prop('disabled', true);
         form.submit();
      ;
   );
</script>

【讨论】：

它说 .data 未定义

您似乎在一个页面中有多个表单标签。如果是这样，您需要通过 id 来定位它 - 例如，using (Html.BeginForm("Add", "UserAccount", FormMethod.Post, new id="form1")) 和 $("#form1").data("validator")

【参考方案2】：

我认为您需要在提交表单之前进行客户端验证您已经在属性上添加了必需的属性，这很好现在使客户端验证工作您需要添加一些 js 来处理客户端的所有验证

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));

下面是你需要的js列表

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

您需要jquery.validate.unobstrusive.js 才能进行客户端验证

其次，您还需要更改网络配置

 <appSettings>  
        ...
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 

        ...
 </appSettings>

更多信息请在此博客上找到what is unobtrusive-validation。

使用这个你的表单在所有字段都正确验证之前不会提交，比如你在属性上提到的Required、Range 等

添加这组代码后，您可以在按钮点击以及下方验证表单

$("#btn1").click(function (e) 

   e.preventDefault();

   // now trigger the form validation, result is 1 or 0
   var result = $('form').valid();  
   if(!result)
   
     // Do some stuff if form is not valid
   
);