在单击提交按钮之前如何检查是不是生成了图像？

Posted 2023-05-08

【中文标题】在单击提交按钮之前如何检查是不是生成了图像？

【英文标题】：How do I check if image is generated before clicking submit button?在单击提交按钮之前如何检查是否生成了图像？

【发布时间】：2018-03-04 04:53:59

【问题描述】：

我正在创建一个 ASP.NET MVC5 应用程序，它利用 jSignature 来捕获用户的签名。如果您对插件不熟悉，它看起来像这样：

当用户点击“保存”时，他们的签名图像会生成并保存在签名板正下方的<img/> 中：

我想做一些前端验证，以确保用户点击了“保存”，因此在提交整个表单之前生成了签名图像。如果可能的话，我想用 jQuery 来做这件事。我有一个我认为该代码应该看起来像的伪代码模型，但我无法将其转化为实际使用：

$("#entireFormSubmitButton").click(function()
   if($("#imageOfSignature").doesNotExistOnPage)
      alert("Your signature is required before submitting this form");
      // also block the user from submitting form until signature provided
   
);

我在编写这段自定义前端验证时遇到了麻烦，因为 ASP.NET 已经为我完成了大部分工作，以确保填写所有其他必填字段。我可以帮我把它变成工作代码吗？

【参考方案1】：

 $("#entireFormSubmitButton").click(function(e)
       //block the user from submitting and check for signature
       e.preventDefault();
       if( $("#imageOfSignature").length == 0 || 
           $("#imageOfSignature").attr("src") == "" || 
           $("#date-of-birth-input").val() == "")
          alert("Your message");
        else 
           //all good, an image exists
           $(this).closest('form').submit();
       
    );

【讨论】：

这几乎完美！我现在遇到的问题是此代码充当表单的唯一前端验证。换句话说，在用户被要求提供他们的出生日期之前，现在用户可以绕过提供该信息，只要他们保存他们的签名。关于如何解决这个问题的任何想法？

您始终可以在后端执行更严格的验证。但是，如果您也想从前端执行此操作，我已经在我编辑的帖子中为您提供了如何执行此操作的示例。