How to make jquery messaging accepts message validation?

Question

Hi Team

I have a form and want to display jquery messaging that validates some messaging before a user enters any value from the form. Currently my messaging do not shown only this error is diplay when inspecting. " 
messages.min.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at messages.min.js:1:437)" 

// signup-form.js for messaging.

// libraries used on this web-form

<script src="js/jquery.validate.js"></script>
    <script src="js/signup-form.js"></script>
    <script src="js/messages.min.js"></script>

/**
@author:Gcobani Mkontwana
@date:10/02/2023
signup-form.js
*/

$().ready(function() {
    
$('#signup-form').validate({
rules:{
    name: {
        required:true,
        minlength:12
    },
    surname:{
        required:true,
        minlength:15
    },
    email:{
        required:true,
        email:true
    },
    confirmed_email:{
        required:true,
        confirmed_email:true
        
    },
    phone_number: {
        required:true,
        phone_number:true,
        minlength:10
    },
    service_number:{
        required:true,
        service_number:true,
        minlength:10
    },
    agree: {
        required:true,
        agree:true
    }
},
messages: {
    name: {
        required:"Please enter your name",
        minlength:"Your name must have at least 12 characters"
    },
    surname: {
        required:"Please enter your surname",
        minlength:"Your surname must have at least 15 characters"
    },
    email: {
        required:"Please enter your email address",
        equalTo:"Please enter the same email address as above"
    },
    agree: "Please accept our policy"
}

})
});

// contact form.html im using required
<div class="col-md-4">
    <div class="form-group relative mb-30 mb-sm-20">
        <input type="email" class="form-control input-lg input-white shadow-5" id="email" placeholder="Email" name="email" required>
        <i class="far fa-envelope transform-v-center"></i>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group relative mb-30 mb-sm-20">
        <input type="text" class="form-control input-lg input-white shadow-5" id="number" placeholder="Phone number" name="number" required>
        <i class="fas fa-mobile-alt transform-v-center"></i>
    </div>
</div>
<div class="col-md-12">
    <div class="form-group relative mb-30 mb-sm-20">
        <textarea class="form-control input-white shadow-5" id="message" name="message" cols="30" rows="7" placeholder="Your message" required>
        </textarea>
    </div>
</div>
<div class="col-lg-12 text-center mt-30">
    <div class = "form-group mt-3">
       <input type="submit" value="Submit">
    </div>