【问题标题】:asp.net mvc disable submit button if form is invalid如果表单无效,asp.net mvc 禁用提交按钮
【发布时间】:2013-09-18 16:20:39
【问题描述】:

如果表单存在验证错误,是否有办法禁用/提交表单提交按钮,这样用户只有在表单有效时才能单击它。 我正在使用带有 ASP.Net MVC 4 和 razor 的“远程”属性验证的不显眼验证。

感谢和问候

【问题讨论】:

  • 我猜你想要这样做client side

标签: javascript validation asp.net-mvc-4 unobtrusive-validation


【解决方案1】:

取决于您在哪里进行验证。如果您使用 jquery 在服务器端执行此操作,则可以将 e.preventDefault 添加到检查它是否无效,并且在满足您的条件之前不会触发按钮单击。如果您正在使用属性进行服务器端验证,那么您可以检查模型状态,例如

if (ModelState.IsValid){
}else{
}

如果模型状态有效(数据通过所有检查)运行一组代码。如果模型状态无效,那么只需返回视图以返回到您开始的位置,并为用户传递一条失败的消息。希望这会有所帮助。

更新:

刚刚看到对您评论的修改。对于 ajax 调用,您需要使用 prevent default。

$('.SubmitButton').on('click', function(e){
   $.ajax({
      //your call
      success: function(result){
          if(result.false){
              e.preventDefault();
              alert(result.message);
          }
      }
   });
});

所以如果调用成功,提交调用将通过。如果为 false,则 jquery 将停止按钮单击,然后您可以显示一条消息或执行其他操作。

【讨论】:

  • 嗨,马特,感谢您的回答。我进行服务器端验证,但我的 Action 仅返回一个 JsonResult,其真/假取决于值。我需要的是在完成 ajax 验证时调用的 js 回调,以便使用 js 禁用/启用提交按钮...对吗?
  • 如果您的验证在服务器端工作,那么我将允许该按钮工作,让您到服务器检查值,然后根据结果引导它们。如果它有效,则重定向或执行接下来的任何操作。如果无效,则返回 View(model),我们通常使用 viewbag 将验证错误传递回用户的视图
  • 在答案中查看我的更新,以停止从 ajax 调用中单击按钮
  • 嗯,我尝试更精确在我的注册模型中,我有:code [Remote("CheckIfEmailExists", "Register")] public string Email { get;放; } code 和 CheckIfEmailExists 是 code [HttpPost] public JsonResult CheckIfEmailExists(string email) { //todo: 替换为查看电子邮件是否已经存在的逻辑 bool result = false;返回 Json(结果); code 一切正常但是如果验证失败我无法通过 JS 禁用提交按钮
  • 如果您通过单击按钮触发 ajax 调用并在失败时使用 e.preventDefault(),则 jquery 将停止单击该按钮。如果您返回 true,那么它将允许单击按钮继续
猜你喜欢
  • 2020-04-18
  • 2019-01-20
  • 2013-02-24
  • 2016-04-03
  • 2019-01-03
  • 1970-01-01
  • 2023-04-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多