JSFiddle - React, Tailwind, and code Playground

by Burduja Serghei

JavaScript

Vue.component('input-group', {
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: 'Input',
    },
    name: {
      type: String,
      default: 'name'
    },
    require: {
      type: Boolean,
      default: false
    },
    value: {
      type: String
    },
    checkInputValue: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      invalid: null,
      emailInvalid: null
    }
  },
  template: `             <div class="checked-form__group">                 <label for="ragione">{{ label }}</label>                 <input                     :type="type"                     :name="name"                     :id="name"                     @change="inputHandler"                     @blur="onBlur"                     :class="{'error': invalid, 'success': invalid === false}"                 >                 <p v-if="invalid === true" class="error">Fields is required</p>                 <p v-if="emailInvalid === true" class="error">Fields must be an email</p>             </div>             `,
  methods: {
    inputHandler(e) {
      const target = e.target;
      if (target.value.length > 0) {
        this.$emit('input', e.target.value)
      }
    },
    onBlur(e) {
      const target = e.target;
      if (target.value.length > 0 && this.type !== "email") {
        this.invalid = false;
      } else if (target.value.length > 0 && this.type === "email") {
        if (!this.validateEmail(target.value)) {
          this.emailInvalid = true;
          this.invalid = false;
        } else {
          this.emailInvalid = false;
          this.invalid = false;
        }
      } else {
        this.invalid = true;
      }
    },
    validateEmail(email) {
      const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return...