How to make a web-form accepts jquery messaging?

See more:

Javascript

jQuery

messaging

Hi Team

I am using jquery messaging and they do not work as expected. Meaning when a user before insert any value from the contact form. it must check it has all the required fields. Currently from the front end it does that but there are no messaging display and when i inspect the element from the browser, i get the following error "

Uncaught SyntaxError: Cannot use import statement outside a module (at messages.min.js:1:437)

".

What I have tried:

<pre lang="Javascript">

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

// signup-form messaging

/**
@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"
}

})
});