最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

plugin development - $ is not defined

programmeradmin2浏览0评论
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?

Share Improve this question edited Aug 10, 2020 at 14:39 fuxia 107k38 gold badges255 silver badges459 bronze badges asked Aug 10, 2020 at 14:27 user9437856user9437856 1117 bronze badges 0
Add a comment  | 

1 Answer 1

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);
发布评论

评论列表(0)

  1. 暂无评论