0

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

2
  • did you check your web browser console? are you getting any javascript/jquery errors in console ? Jun 25, 2019 at 10:15
  • @ChetanVaghela no errors. console returns - #submit clicked Jun 25, 2019 at 10:27

1 Answer 1

0

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>
12
  • Thanks for trying for me. It seems to be producing the same result. still not validating the form, skipping straight to download. I have another area on the form which allows the customer to add their signature, could the Jquery from that be interfering? Jun 25, 2019 at 11:24
  • did you add form name and change fields name like name to firstname etc like i added in above example? because i have tested and validation working for me after change fileds names. Jun 25, 2019 at 11:27
  • the other form have different ids, names or not ? or in validation scripts, $form variable assign with form name ? because fields name can conflict with validation. are you getting any kind of error then ? Jun 25, 2019 at 11:30
  • I basically copy and pasted your code straight into mine Jun 25, 2019 at 11:43
  • where did you add code ? check other form have same fields names ? remove jquery.min.js files if not require because wordpress by default enqueue jquery js. did you add scripts in footer ? Jun 25, 2019 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.