Question

我的模型属性需要属性，但我添加了一个＆＃34;微调器＆＃34;以onsubmit形式显示处理请求。现在，即使它没有提交表单，它也会显示＆＃34; spinner＆＃34;我创建并粘贴在叠加层上，但具有必需属性的文本框是焦点。

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>

他们是否可以先检查＆＃34;是否需要＆＃34;在访问onsubmit函数之前是否满足属性？

Answer 1

您需要将 submitHandler 功能添加到 验证器 。 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>

Answer 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才能使客户端验证工作

其次你需要更改web配置

 <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
   }
});

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

2 个答案: