How to setup validation for Textbox component

Question

I have tried following the documentation and things are just not working I would like to know how to setup a textbox validation with a minLength of 3 characters required for Item Name. The documentation is either incomplete or not clear enough on how to set this up . could you provide me with an example of how to set this up so that I can get it put into my application.

thanks

Sureshkumar P · Accepted Answer

Hi David, Thanks for your update. As per your request we have modified the sample. please find the sample to validate the maximum character validation. Please find the code example here:

Sureshkumar P · Answer

Hi David, 
 
Greetings from Syncfusion support. 
 
We suggest you validate the textbox component using our FormValidator plugin to achieve your requirement.  
 
Please refer the code example: 





import {FormValidator, FormValidatorModel} from '@syncfusion/ej2-vue-inputs'; 
 
export default { 
    data: function() { 
        return { 
          options : { 
        //Initialize the CustomPlacement. 
            customPlacement: function(inputElement, errorElement) { 
                inputElement = inputElement.closest('.form-group').querySelector('.error'); 
                inputElement.parentElement.appendChild(errorElement); 
            }, 
                rules: { 
                    'Name': { 
                        required: true 
                    }, 
                    'Email': { 
                        required: true 
                    }, 
                    'upload': { 
                        required: true 
                    } 
                } 
            } 
        } 
    } 
let formObject: FormValidator = new FormValidator('#form-element', options); 
// Add email rule to user element 
formObject.addRules('user', { maxLength: 7 }); 
// Remove number rule from age element 
formObject.removeRules('age', ['number']); 
 
 
To know more about our form validator, please refer the online documentation link: https://ej2.syncfusion.com/vue/documentation/form-validator/validation-rules/#default-rules  
 
Regards, 
Sureshkumar P

David Wisenbaugh · Answer

can you provide me a working example on codesandbox, I am still unable to get this to work with the following code ,  how is it attached to the textbox control etc . thanks

Sureshkumar P · Answer

Hi David, 
 
Thanks for your update. 
 
As per your request, we have created the code sandbox sample with maximum length condition. Please refer the sample below. 
 
Sample link: https://codesandbox.io/s/vue-directives-conditional-rendering-v-if-v-else-v-show-v-for-forked-cz754?file=/src/components/Foo.vue:3862-3871  
 
Regards, 
Sureshkumar P.

David Wisenbaugh · Answer

Thanks for the example but I do not see that it is for the Syncfusion Textbox Control which again makes it difficult to add this to my application is there another way to validate this based on how many characters are typed into the Textbox Control it should not be this complicated for simple validation.

please advise