验证表单输入，然后单击启动 ajax 请求

Question

我有一个要验证的表单，以确保完成所有必需的区域，然后要么拒绝请求并显示原因的消息，要么提交表单...

拒绝功能很好，它告诉用户单击一个按钮后他们需要什么信息。

但是，如果所有字段都填写正确，则表单需要点击 2 次按钮才能提交。

看起来好像第一次单击验证并且第二次单击然后提交表单。理想情况下，我希望一键完成所有操作

我的 jQuery

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;

            $( "#pdfsubmit" ).click(function() {
                alert("Submitted");
                sendToServer();
            });

            function sendToServer() {

                console.log("#pdfsubmit clicked");
                var pdf = new jsPDF('p', 'pt', 'a4');

                pdf.addHTML(document.getElementById("product_sheet"), function() {

                    ps_filename = "generated-product-sheet";
                    var file = btoa(pdf.output());

                    var formData = new FormData();
                    formData.append('data', file);

                    $.ajax({
                      url: jspod.ajax_url+'?action=so56917978_upload',
                      data: formData,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                          alert(data);
                      }
                  });
                });
            }
        }
    });  
});

如果有人可以帮助我对代码进行排序，以便一键完成所有工作，将不胜感激:-)

另外，我在表单上有一个签名框。目前我没有对此进行验证。如果有人可以帮我在签名框中添加验证，我也会非常感激。

签名板

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12 sig">
                    <h3>Click to sign</h3>
                    <input type="text" id="pdftxt" name="signature" style="border-radius: 5px;">
                </div>
            </div>
        </div>
    </div>
</div>

我将 jQuery 归因于签名，如果需要我也可以添加它，但代码非常多。

Answer 1

您不需要额外的click 侦听器，并且流程在错误的时间添加了它。

替换

$( "#pdfsubmit" ).click(function() {
    alert("Submitted");
    sendToServer();
});

有

sendToServer();

Answer 2

这里有几处错误：在 submitHandler 中声明函数sendToServer()，并重新添加点击处理程序。此外，$ = jQuery 也很奇怪。这是一个更简洁的实现

jQuery(function($){

    // Declare your function on page load
    function sendToServer() {

        console.log("#pdfsubmit clicked");
        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById("product_sheet"), function() {

            ps_filename = "generated-product-sheet";
            var file = btoa(pdf.output());

            var formData = new FormData();
            formData.append('data', file);

            $.ajax({
              url: jspod.ajax_url+'?action=so56917978_upload',
              data: formData,
              processData: false,
              contentType: false,
              type: 'POST',
              success: function(data){
                  alert(data);
              }
          });
        });
    }

    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"
        },
        // call sendToServer function
        submitHandler: sendToServer()
    });  
});

Answer 3

我不得不将开头从 jQuery(function($){ 更改为 jQuery( "#pdfsubmit" ).click(function() {

还有 `submitHandler: function() { $ = jQuery;

        $( "#pdfsubmit" ).click(function() {
            alert("Submitted");
            sendToServer();
        });

        function sendToServer() {` 

到

submitHandler: function sendToServer() {

完整代码：

jQuery( "#pdfsubmit" ).click(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 sendToServer() {

            console.log("#pdfsubmit clicked");
            var pdf = new jsPDF('p', 'pt', 'a4');

            pdf.addHTML(document.getElementById("product_sheet"), function() {

                var file = btoa(pdf.output());

                var formData = new FormData();
                formData.append('data', file);

                $.ajax({
                    url: jspod.ajax_url + '?action=so56917978_upload',
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) {
                        alert(data);
                    }
                });
            });
        }
    });
});