我有一个表格，提交时可转换为pdf。我在表单中添加了一些验证，但它似乎不起作用。
我已经在Codepen和JSFIDLE中进行了测试，代码运行良好，但在Wordpress上它跳过了验证，直接提交
代码：
<div id="contact-form">
<form method="post" action="/">
<div class="podrecieved">
<h3>Recieved by<h3>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div>
<label for="message">
<span class="required">Additional Comments:</span>
<textarea id="message" name="message" placeholder="Please write your message here." tabindex="5"></textarea>
</label>
</div>
<button name="submit" type="submit" id="submit">Download PDF</button>
</form>
</div>
JS公司：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
var $form = $("form"),
$successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\\s]*$/);
});
$form.validate({
rules: {
name: {
required: true,
minlength: 3,
letters: true
},
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name (only letters and spaces are allowed)",
email: "Please specify a valid email address"
},
submitHandler: function() {
$ = jQuery;
$( "#submit" ).click(function() {
make_product_sheet();
});
function make_product_sheet() {
console.log("#submit clicked");
var pdf = new jsPDF(\'p\', \'pt\', \'a4\');
pdf.addHTML(document.getElementById("product_sheet"), function() {
ps_filename = "generated-product-sheet";
pdf.save(ps_filename+\'.pdf\');
});
}
}
});
如前所述，在codepen和JSFIDLE上运行很好，但在我的站点上运行时，它会跳过验证，直接进行提交（下载）。
最合适的回答,由SO网友:Chetan Vaghela 整理而成
请尝试以下代码。我对你的代码做了一些更改。对我来说，这似乎正在起作用。我更改了表单的字段名称，并在jquery中做了一些小的更改。请检查您的终端，并让我知道您的问题是否会解决。
HTML
<div id="contact-form">
<form method="post" action="/" name="pdf-download">
<div class="podrecieved">
<h3>Recieved by<h3>
</div>
<div class="form-group">
<label for="firstname">Name:</label>
<input type="text" class="form-control" id="firstname" name="firstname">
</div>
<div class="form-group">
<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>
<button name="submit" type="submit" id="submit">Download PDF</button>
</form>
</div>
JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
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("clicked");
make_product_sheet();
});
function make_product_sheet() {
console.log("#submit clicked");
var pdf = new jsPDF(\'p\', \'pt\', \'a4\');
pdf.addHTML(document.getElementById("product_sheet"), function() {
ps_filename = "generated-product-sheet";
pdf.save(ps_filename+\'.pdf\');
});
}
}
});
});
</script>
