javascript - 在表单验证中包含数字签名
问题描述
我开发了一个自定义表格,我的客户需要在收到时签名。然后将表单转换为 PDF。还有一些必填字段。
一旦用户单击提交,表单会检查以确保在提交之前完成所有必填字段。我不能,但要检查签名。
我正在使用sketch.js 来捕获签名。
形式:
<div id="contact-form">
<form method="post" action="/" name="pdf-download">
<div class="podrecieved">
<h3>Recieved by<h3>
</div>
<div class="form-group col-xs-12">
<label for="firstname">Name:</label>
<input type="text" class="form-control" id="firstname" name="firstname">
</div>
<div class="form-group col-xs-12">
<label for="email_id">Email address:</label>
<input type="email_id" class="form-control" id="email_id" name="email_id">
</div>
<div>
<label for="messages">
<span class="required">Additional Comments:</span>
<textarea id="messages" name="messages" placeholder="Please write your message here." tabindex="5"></textarea>
</label>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<h3>Click to sign</h3>
<input type="text" id="txt" style="border-radius: 5px;">
</div>
</div>
</div>
</div>
</div>
<div id="editor"></div>
<button name="submit" type="submit" id="submit">Download PDF</button>
</form>
</div>
JS - 顶部验证
jQuery(function($){
var $form = $("form[name='pdf-download']"),
$successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
$form.validate({
rules: {
firstname: {
required: true,
minlength: 3,
letters: true
},
email_id: {
required: true,
email: true
}
},
messagess: {
firstname: "Please specify your name (only letters and spaces are allowed)",
email_id: "Please specify a valid email address"
},
submitHandler: function() {
$ = jQuery;
$( "#submit" ).click(function() {
alert("Submitted");
make_product_sheet();
});
function make_product_sheet() {
console.log("#submit clicked");
var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
pagesplit: true
};
pdf.addHTML(document.getElementById("product_sheet"), function() {
ps_filename = "generated-product-sheet";
pdf.save(ps_filename+'.pdf');
});
}
}
});
});
我试过添加
$form.validate({
rules: {
firstname: {
required: true,
minlength: 3,
letters: true
},
email_id: {
required: true,
email: true
},
txt: {
required:true'
},
messagess: {
firstname: "Please specify your name (only letters and spaces are allowed)",
email_id: "Please specify a valid email address",
txt: "Please add signature to form"
},
理想情况下,我希望只有在底部添加签名后才允许提交表单,任何帮助都会很棒。
解决方案
只需添加一个布尔值并在创建签名 pdf 后(应该存在回调)将其更改为 true。然后使用 if boolean true 继续验证或向要求签名的用户显示错误。
推荐阅读
- c++ - 使用 reference_wrappers 初始化向量
- postgresql - psycopg2:语句返回码
- vue.js - 在哪里存储多个 vue 组件使用的非常大的“blob”对象
- python - 无法将外部文件中的数据加载到 ipython 模块中
- ios - 在 Objective-C 中加载时将光标移动到预填充 Textview 的开头
- docker - 无法在 clickhouse docker 映像上运行 docker-compose push:资源被拒绝
- linux - 如何按主题编号(文件名的前缀)对文件进行排序并从中创建一个新文件夹?
- c++ - 优雅地声明 2(甚至多)维 std::arrays
- javascript - 将 FirebaseFirestore.DocumentSnapshot 转换为 Node.js 中的列表/地图
- node.js - 如何将文件(在 node.js 中)从内存保存到磁盘上的特定位置?