Datatable : row edit : as-you-type validation using watch:

UI Components for Vue
Post Reply
ihosteju
Posts: 9
Joined: 06 Sep 2021, 12:18

07 Dec 2021, 17:31

Hello,

Is there a way to implement validation on a field as you type within a DataTable in row edit mode?
I found this example based on watch: https://blog.logrocket.com/form-input-v ... -watchers/.
This works fine but i don't know how to do it as field names change dynamically for each row.
Many thanks in advance ;-)

Code: Select all

<template>
    <form>
      <label for="email">Email Address:</label>
      <InputText type="text" v-model="email" required> <br>
      <span v-if="msg.email">{{msg.email}}</span>
    </form>
</template>

<script>
export default {
  name: 'Test',
  data(){
    return {
      email: ''
    }
  },
  watch: {
    email(value){
      // binding this to the data value in the email input
      this.email = value;
      this.validateEmail(value);
    }
  },
  methods:{
    validateEmail(value){
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
  {
    this.msg['email'] = '';
  } else{
    this.msg['email'] = 'Invalid Email Address';
  } 
    }
  }
}
</script>

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests