How to make a jquery messaging accepts a user validation from the web-form?

I need some help, i have message.min.js file that must diplay messaging before a user puts an input from the form. Currently the form does not display any message and i only get this error message when inspecting the element from the browser. ” messages.min.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at messages.min.js:1:437)” .

// javascript libraries

// I get an exception again when i try to use this type module ” Uncaught TypeError: Failed to resolve module specifier “@angular/core”. Relative references must start with either “/”, “./”, or “../”.

// signup-form messaging

$().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"
}

})
});