I have a form which converts to pdf on submit. I have added some validation to the form but it does not seem to work.
I have tested in Codepen and JSfiddle and the code works fine but on Wordpress it skips the validation and jumps straight to submit
Code:
<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');
});
}
}
});
as mentioned, works fine on codepen and JSFiddle but when running on my site, it skips the validation and goes straight to the submit (download).