removing icon from input field VeeValidate

Question

I'm new in Vue.js and i have problem with validations. I'm using Vee-Validate framework for validations. Validation is working, but i got this red circle icon from 'is-danger' class. Question: How to set only this red border, but without this little icon? Look at the screenshot below:

 <ValidationProvider
      :rules="{
      required: true,
      digitsRegex: /^(0|[1-9][0-9]{0,2}(?:(,[0-9]{3})*|[0-9]*))(\.[0-9]+){0,1}$/
      }"
      v-slot="{ errors, valid }"
       name="Discount"
  >
    <b-field
     :type="{ 'is-danger': errors[0], 'is-primary': valid }"
     >
      <b-input
         v-model="discount"
         step="any"
         type="text"
         :min="0"
         :max="sumWithoutDiscount"
      />
    </b-field>
       <span
           v-for="error in errors"
           :key="error.id"
           class="has-text-danger help"
       >{{ error }}</span
       >
  </ValidationProvider>

dont use the is-danger class and use another class that only has the styles you need? — ravi kumar

Rutesh Rathod Rutesh Rathod · Accepted Answer · 2020-09-14T09:46:00

It would be better if you have shared the code for the validation you wrote, but you can refer below code for only warning text and red-bordered textbox and also attached image for output.

Please Mark as Right Answer, if this solves your problem

Keep Coding Buddy.

<template>
  <div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
      <input
        v-validate="'required|email'"
        :class="{'input': true, 'is-danger': errors.has('email') }"
        name="email"
        type="text"
        placeholder="Email"
      >
      <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "basic-example"
};
</script>

VeeValidate Example

removing icon from input field VeeValidate

1 Answers