1. Home
  2. Forum
  3. Vue
  4. Where is FormValidation class?

Where is FormValidation class?

I've got a system using EJS Vue. We aren't using webpack or anything like that. It's just using the global version of the files so is set up like this:

        <script src="~/lib/syncfusion/ej2-base.min.js></script>
        <script src="~/lib/syncfusion/ej2-buttons.min.js></script>
        <script src="~/lib/syncfusion/ej2-inputs.min.js></script>
        <script src="~/lib/syncfusion/ej2-lists.min.js></script>
        <script src="~/lib/syncfusion/ej2-popups.min.js></script>
        <script src="~/lib/syncfusion/ej2-navigations.min.js></script>
        <script src="~/lib/syncfusion/ej2-splitbuttons.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-base.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-buttons.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-calendars.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-dropdowns.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-inputs.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-popups.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-grids.min.js></script>
        <script src="~/lib/syncfusion/ej2-vue-navigations.min.js></script>


Now in my code I am trying to do this:

this.formValidator = new FormValidator('#dialog-test', this.options);

However, it can't find FormValidator. How should I be getting reference to FormValidator?

Thanks

Jeff



5 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team February 8, 2021 11:28 AM UTC

Hi Jeff, 

Greetings from Syncfusion support. 

Query: However, it can't find FormValidator. How should I be getting reference to FormValidator? 

We checked your reported query. We would like to know you that, you have to import FormValidator as like below highlighted code in your application. Please find the documentation below for reference. 

import {FormValidator, FormValidatorModel} from '@syncfusion/ej2-vue-inputs'; 



Kindly check with the above suggestion to resolve the reported issue. Please get back us if you need further assistance. 

Regards, 
Ponmani M 


JB Jeff Butterworth February 8, 2021 11:17 PM UTC

The problem is that using :

import {FormValidator, FormValidatorModel} from '@syncfusion/ej2-vue-inputs'; 

will only work if I am using modules, which I am not. As I said in my original post I am loading the global versions of the SyncFusion files. 

If I include this in my js file and load that file with <script type="module" .... />   I get an error as follows:

Uncaught TypeError: Failed to resolve module specifier "@syncfusion/ej2-vue-inputs". Relative references must start with either "/", "./", or "../"

Cheers

Jeff


PM Ponmani Murugaiyan Syncfusion Team February 9, 2021 05:01 PM UTC

Hi Jeff, 

Thanks for the update. 

We have prepared sample based on your requirement using direct scripts. Please find the sample below for reference.   


<!DOCTYPE html> 
 
<head> 
    <title>Syncfusion Vue (ES5) UI Components</title> 
    <!-- Essentail JS2 for Vue  (All components Styles) --> 
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" /> 
    <!-- Vue library file--> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" type="text/javascript"></script> 
    <!-- Essential JS 2 for Vue  global script --> 
    <script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <h2>Syncfusion Vue (ES5) TextBox Components</h2> 
    <div id="app"> 
    <form id="form-element"> 
        <div class="e-float-input"> 
            <input type="text" id="required" name="product_name" class="form-control"> 
        </div> 
    </form> 
    </div> 
    <script> 
       Vue.use(ejs.inputs.TextBoxPlugin); 
        new Vue({ 
            el: '#app', 
        }); 
        var options = { 
            rules: { 
                'product_name': { required: true }, 
            } 
        }; 
        var formObject = new ej.inputs.FormValidator('#form-element', options); 
        // validate all input elements in the form 
        formObject.validate(); 
    </script> 
</body> 
</html> 


Regards, 
Ponmani M 


Marked as answer
JB Jeff Butterworth February 9, 2021 09:58 PM UTC

Ok, that's interesting. 

The bit out of that I was after was ej.inputs.FormValidator.

I had installed SyncFusion via npm and then copied the global files from node-module to my lib folder and then linked to those files:

        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>
        <script src="~/lib/syncfusion/[email protected]()"></script>

In this case ej doesn't have an inputs property so I don't get access to ej.inputs.FormValidator. When I put a watch in the browser, I see ej.base and ej.navigations. 

As soon as I replace my links with your reference to the cdn version of SyncFusion it all works. So that's great that I can get access to FormValidator now. 

So using the CDN, can I specify a version in the cdn link>? And if so, what is the latest version number to use?

Thanks

Jeff




PM Ponmani Murugaiyan Syncfusion Team February 10, 2021 12:14 PM UTC

Hi Jeff, 

We are glad to hear that the provided suggestion helps you in achieving your requirement. 

Query: So using the CDN, can I specify a version in the cdn link>? And if so, what is the latest version number to use? 
 
Yes, you can specify the version in the CDN link as like below and the latest version is 18.4.42. 


Regards, 
Ponmani M 


Loader.
Up arrow icon