Form validation before submitting

Question

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).

Answer 1

Please Try bellow code. i have made some changes in your code.it seems now working to me. i have changes fields name of forms and little bit changes in jquery. please check your end and let me know if your issue will solve.

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>