Getting TypeError when using field rules: value.trim is not a function

[DanishOnGit]

Hello folks! I need your help. 🙏

I am getting a Type error when I do field validation for 'text' input type. (I am using Vue3 and vite)

Here is the error:

input.vue:104 Uncaught (in promise) TypeError: value.trim is not a function
    at Proxy.fieldRule (input.vue:104)
    at _validate (vee-validate.esm.js:513)
    at validate (vee-validate.esm.js:492)
    at validateCurrentValue (vee-validate.esm.js:1328)
    at validateValidStateOnly (vee-validate.esm.js:1343)
    at vee-validate.esm.js:1372
    at callWithErrorHandling (runtime-core.esm-bundler.js:6668)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6677)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1931)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:6869)

Here is the field component:

<Form> 
<Field
      @input="handleInput"
      :rules="fieldRule"
      class="
        block
        pr-4
        border-gray-300
        text-black
        placeholder-gray-400
        focus:outline-none focus:ring-gray-400 focus:border-gray-500
        sm:text-sm
        rounded-md
      "
      :value="value"
      :aria-describedby="`${type}-error`"
      :name="name"
      :id="`input-${componentId}`"
      :type="type"
    />
</Form>

And here is the script:

<script>
import { Form, Field, ErrorMessage } from "vee-validate";

export default {
  name: "Input",
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  props: {
    label: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: "",
    },

    type: {
      type: String,
      default: "text",
    },
 
  },
  data() {
    return {
      componentId: 0,
    };
  },
  mounted() {
    this.componentId = this._uid;
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    fieldRule(value) {
      switch (this.type) {
        case "text": {
          if (value && value.trim()) {
            return true;
          }
          return "This is required";
        }
        case "email": {
          if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
            return true;
          }
          return "Please enter a valid email";
        }
        default:{
          return true
        }
      }
    },
  },
};
</script>

And here is how I use that component:

 <Input label="Your name" />

Please help guys! I am not getting why this error is occuring.
Also, I tried checking the type of value prop: It is showing as string
console.log(typeof this.value) // string

[logaretm]

Your rule should take into account undefined and null values:

if (!value || !value.trim()) {
  return 'This field is required';
}

[DanishOnGit]

Hey @logaretm ,

I tried your solution, but it didn't work.

 fieldRule(inputValue) {
      switch (this.type) {
        case "text": {
          console.log("inputValue is", inputValue);
          if (!inputValue || !inputValue.trim()) {
            return "This field is required";
          }
          if (inputValue && inputValue.trim()) {
            return true;
          }
          return "Field is required";
        }

The problem is, when I do console.log(inputValue) , it turns out that inputValue parameter is an empty { } object (I was expecting it to be a string which comes automatically as e.target.value).

The parameter inputValue will be received automatically from the input <Field> field(e.target.value).Right?