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 01 Answer
Reset to default 0WP 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);