2

I have dynamic fields generated on my form, All the validations that are to be set are retrieved from database (i.e. whether the field is required or optional and numeric value or string are all saved in database), Now when the page is rendered i want to validate my form i'm trying to write my own custom methods but it cannot validate the form,the issue is in custom method error message is not shown and the form is also submitting without validation.

<input v-model="field.user_value" :name="field.name" v-on:input="validateTextInput(field.field_validations,$event)" type="text" class="form-control input-md form-control"/>

methods: {
    validateTextInput(validations,event)
    {
      if(validations.req=='required')
      {
       if(event.target.value=='')
       {
         alert('This field is required');
         return false;
       }

       if(validations.allowed=='string')
       {
        
       }


      }
user3653474
  • 3,393
  • 6
  • 49
  • 135

1 Answers1

0

You're not using the correct variable for the event, use $event instead of e.target.value

<input v-model="field.user_value" :name="field.name" v-on:input="validateTextInput(field.field_validations, $event)" type="text" class="form-control input-md form-control"/>

methods: {
    validateTextInput(validations,event)
    {
      if(validations.req=='required')
      {
       if(event.target.value=='')
       {
         alert('This field is required');
         return false;
       }

       if(validations.allowed=='string')
       {
        
       }


      }
Ezycod
  • 392
  • 2
  • 12
  • I'm getting the value but my issue is how can i show errors and prevent form submit or is there any better way for this type of validation, i have updated my code. – user3653474 Aug 13 '20 at 18:03
  • create a variable under data() for example: "formIsValid: false" and if there is something wrong in any of these fields set it to "this.formIsValid= true" and then listen to the submit event of the form and maybe disable the function take a look at: https://vuejs.org/v2/cookbook/form-validation.html – Ezycod Aug 13 '20 at 18:07
  • Can vuelidate library be used for this type of validation – user3653474 Aug 13 '20 at 18:31
  • probably, if you have enough knowledge. – Ezycod Aug 13 '20 at 18:40