0

I am learning WordPress and I am working on the contact us form. I am using jQuery validation. I am using the below code.

function contact($atts){ 
$html='<form name="invite" id="contactform" class="contactform" method="post" action="">
  <div class="row">

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="form-group pb-3">
        <label>Your email address</label>
        <input name="email" placeholder="[email protected]" type="email" class="form-control customInput" />
      </div>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="form-group mt-3">
        <label>Your Message</label>
        <textarea name="message" placeholder="Your Message..." rows="6" class="form-control customInput"></textarea>
      </div>
    </div>

  </div>
  <div class="formbtn mt-5"><input type="submit" class="" name="Send Mail"></div>
</form>'; 
$html.='<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<script>
  $(function() { // ready handler
    var isReqInprogress = false;
    $.validator.addMethod("emailExt", function(value, element, param) {
      return value.match(/^[a-zA-Z0-9_\.%\+\-]+@[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,}$/);
    }, "Your email id is not correct format");
    $("#contactform").validate({
      rules: {
        email: {
          required: true,
          email: true,
          emailExt: true

        },

        message: {
          required: true,
          minlength: 10
        }
      },
      submitHandler: function(form) {
        if (isReqInprogress) {
          return;
        }
        $.ajax({
          url: process.php ",
          type: "post",
          data: $("#contactform").serialize(),
          dataType: "JSON",
          success: function(response) {

            alert("Your message has been received.");
            location.reload();
            isReqInprogress = false;
          }
        });
      }
    });

  });
</script>'; 
return $html; 
} add_shortcode( 'contact-form', 'contact');

My issue is, I am getting the error

Uncaught ReferenceError: $ is not defined

I already added the jquery at the bottom above the </body>. I know the jquery validation is above the jquery but If I add again jQuery then there will be two jQuery on my page.

and if I remove the jQuery from the bottom then my other scripts are not working.

Can you please assist me in what is the best way to handle this issue?

0

1 Answer 1

0

WP loads jQuery in no conflict mode, so you can either swap $() for jQuery(), or wrap it in a function, e.g.

(function($) {

  // Code using `$` ...

})(jQuery);
5
  • I tried but I am getting the same error but this time I am getting the error on this })(jQuery), and error is jQuery is not defined Commented Aug 10, 2020 at 16:18
  • You need to load jQuery
    – Tom J Nowell
    Commented Aug 10, 2020 at 16:24
  • Ok. I got your point. I have to add the jQuery link in the contact form and the other jQuery which I added in the footer will not affect this. right? Commented Aug 10, 2020 at 16:29
  • If you're putting jQuery in the footer then you can't use jQuery before it's loaded. Either your JS has to go in the footer after the jQuery loading tag, or you have to move loading jQuery up. The order matters. Additionally, your inline JS needs to run after the JS in your hdr.js that runs on the domready event.. Anyway I see this Q got closed. You should ask on stackoverflow for generic JS issues. This is not a WP question
    – Tom J Nowell
    Commented Aug 10, 2020 at 16:44
  • ok. I got your point. Commented Aug 10, 2020 at 16:56

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