How to setup validation for Textbox component

[David Wisenbaugh]

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]

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]

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]

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]

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

[Sureshkumar P]

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: 

<template> 

  <div> 

        <form id="form1" action="saveFiles.ashx" method="post"> 

          <h4 class="form-title">Form Validator</h4> 

 

          <div class="form-group" style="padding-top: 11px"> 

          /* rendering Input component */ 

            <div class="e-float-input"> 

              <input type="number" id="mobileno" name="MobileNo" data-required-message="* Enter your mobile number" 

                required 

                data-msg-containerid="noError" 

              /> 

              <span class="e-float-line"></span> 

              <label class="e-float-text e-label-top" for="mobileno" 

                >Mobile No</label 

              > 

            </div> 

            <div id="noError"></div> 

          </div> 

        </form> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { UploaderPlugin } from "@syncfusion/ej2-vue-inputs"; 

import { FormValidator } from "@syncfusion/ej2-vue-inputs"; 

Vue.use(UploaderPlugin); 

 

export default { 

  data: function () { 

    return { 

      dropElement: ".control-fluid", 

      formObj: "", 

      options: { 

        //Initialize the CustomPlacement. 

        customPlacement: function (inputElement, errorElement) { 

          inputElement = inputElement 

            .closest(".form-group") 

            .querySelector(".error"); 

          inputElement.parentElement.appendChild(errorElement); 

        }, 

        //Initialize the component rules. 

        rules: { 

          MobileNo: { 

            required: true, 

            maxLength: 7, 

          }, 

        }, 

      }, 

    }; 

  }, 

  mounted: function () { 

    let localObj = this; 

    document.getElementById("submit-btn").onclick = function () { 

      localObj.onFormSubmit(); 

    }; 

    this.formObj = new FormValidator("#form1", this.options); 

  }, 

  methods: { 

    onFormSubmit: function () { 

      let formStatus = this.formObj.validate(); 

      if (formStatus) { 

        this.formObj.element.reset(); 

        this.$refs.dialogObj.show(); 

      } 

    }, 

  }, 

}; 

</script> 

<style> 

@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css"; 

 

 

 

Please find the modified sample here: https://codesandbox.io/s/vue-directives-conditional-rendering-v-if-v-else-v-show-v-for-forked-6utbn  

 

Regards, 

Sureshkumar P