plugin development - $ is not defined

admin管理员组

文章数量:1326338

This question already has answers here: $ not defined using jQuery in WordPress (3 answers) Closed 4 years ago.

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?

This question already has answers here: $ not defined using jQuery in WordPress (3 answers) Closed 4 years ago.

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

Share Improve this question edited Aug 10, 2020 at 14:39 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Aug 10, 2020 at 14:27 user9437856user9437856 11177 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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);

本文标签： plugin development is not defined