验证表单输入，然后单击启动 ajax 请求
Posted
技术标签:
【中文标题】验证表单输入，然后单击启动 ajax 请求【英文标题】：Validate form input then initiate ajax request in single click 【发布时间】：2019-12-12 08:34:22 【问题描述】：我有一个要验证的表单，以确保完成所有必需的区域，然后要么拒绝请求并显示原因的消息，要么提交表单...
拒绝功能很好，它告诉用户单击一个按钮后他们需要什么信息。
但是，如果所有字段都填写正确，则表单需要点击 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 归因于签名，如果需要我也可以添加它，但代码非常多。
【问题讨论】：
【参考方案1】：您不需要额外的click 侦听器，并且流程在错误的时间添加了它。
替换
$( "#pdfsubmit" ).click(function()
alert("Submitted");
sendToServer();
);
有
sendToServer();
【讨论】：
我得到与此处其他答案相同的错误。点击后，页面不提交表单，而是重定向到主页 好的...那么这可能是由于控制台中抛出的错误 当它刷新到主页控制台显示：POD.js?ver=1.1:4 Uncaught TypeError: Cannot read property 'addMethod' of undefined at HTMLDocument.<anonymous> (POD.js?ver=1.1:4) at i (jquery.js?ver=1.12.4-wp:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2) at Function.ready (jquery.js?ver=1.12.4-wp:2) at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)
听起来好像缺少验证插件
验证工作正常。表单按应有的方式进行验证。提交表单似乎有错误【参考方案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()
);
);
【讨论】：
感谢您的回答。我已经尝试将 JS 更改为此 ...提交表格【参考方案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);
);
);
);
);
【讨论】：
以上是关于验证表单输入，然后单击启动 ajax 请求的主要内容，如果未能解决你的问题，请参考以下文章