Question

我已经开发了一个自定义表格，我的客户需要在收据上签名。然后将表格转换为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"
      },

理想情况下，我希望仅在底部添加签名后才允许提交表单，任何帮助都会很大。

Answer 1

只需添加一个布尔值，然后在创建签名pdf（应该存在回调）之后将其更改为true。然后使用if布尔值true继续进行验证，或向要求用户签名的用户显示错误。

在表单验证中包括数字签名

1 个答案: