How to make jquery messaging accepts message validation?

Guest User

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


    
    

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Joshi3y ago
Hello Gcobani,

Import in javascript you can not directly user script tag you need to use an import statement. please check below sample code how to use import in a javascript file. try the same it should work.
```
//Import Statement
import data from 'data.js'

Use import file properties and functions like below.
data.addData();
```
Thanks
Guest User3y ago
Hi Naimish and Uday

I did follow the guidance given, now i am experienc this new error " Uncaught TypeError: Failed to resolve module specifier "@angular/core". Relative references must start with either "/", "./", or "../"." How do i resolve this and i have used this on my contact form

// javascript libraries
Uday Dodiya3y ago
The error message you are seeing indicates that there is a problem with the messages.min.js file, specifically that it cannot use an import statement outside of a module. This is likely because the file is using the ES6 import syntax, which is only supported in modern browsers and in JavaScript modules.

To fix the issue, you could try using a different version of messages.js that does not use the import syntax. Alternatively, you could update your code to use JavaScript modules by adding the type="module" attribute to your
Naimish Makwana3y ago
Hello Gcobani

This error usually occurs when you are trying to import a module in a script file that is not configured as a module or is not being loaded as a module. Use a script tag with the “type” attribute set to “module” to load the “messages.min.js” file.

Example:
Thanks

Naimish Makwana