【问题标题】: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 已经为我完成了大部分工作,以确保填写所有其他必填字段。我可以帮我把它变成工作代码吗?

【问题讨论】:

    标签: javascript jquery asp.net-mvc unobtrusive-validation jsignature


    【解决方案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();
           }
        });
    

    【讨论】:

    • 这几乎完美!我现在遇到的问题是此代码充当表单的唯一前端验证。换句话说,在用户被要求提供他们的出生日期之前,现在用户可以绕过提供该信息,只要他们保存他们的签名。关于如何解决这个问题的任何想法?
    • 您始终可以在后端执行更严格的验证。但是,如果您也想从前端执行此操作,我已经在我编辑的帖子中为您提供了如何执行此操作的示例。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-08
    • 1970-01-01
    • 2013-05-22
    • 1970-01-01
    • 2014-07-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多