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=".19.2/jquery.validate.min.js"></script>
<script src=".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?

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/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare/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?

• plugin-development
• jquery
• validation

1 Answer 1

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