JSFiddle - React, Tailwind, and code Playground

by mahassan

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <label for="name">Name</label>
    <input type="text" @keypress="checkField" v-model="name">
    <span v-if="checkName">Checks out </span>
    <span v-if="!checkName">Please enter valid name</span>
  </div>

  <div>
    <label for="Age">Age</label>
    <input type="number" @keypress="checkField2" v-model="age">
    <span v-if="checkAge">Enter Valid Age </span>
    <span v-if="!checkAge">Not a valid age</span>
  </div>

  <div>
    <select name="" id="">
    <option disabled selected>Please Choose</option>
    <option v-for="gender in genders" :value="gender">
      {{gender}}
    </option>
  </select>
    <span v-if="genderField">Please select a gender</span>
    <span v-if="!genderField">Green means go</span>
  </div>
  <div>
    <button @click="checkSubmit(e)">Submit</button>
  </div>
</div>

SCSS

div {
  margin: 1rem 0;
  margin-left: 2rem;
}

button {
  background: lightblue;
  color: white;
  padding: 1rem;
  font-size: 1.5rem;
  border: 0;
  border-radius: 5px;
  transition: 1s;
}

button:hover {
  background: green;
  cursor: pointer;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    name: "",
    checkName: "",
    age: "",
    checkAge: "",
    genders: ["Male", 'Female', "Other"],
    genderField: ""
  },
  methods: {
    checkField() {
      if (!this.amount) {
        this.checkName = true
      }
    },
    checkGender() {
      if (!this.genders) {
        this.genderField = true
      }
    },
    checkSubmit(e) {
      //check if all fields are filled before submitting
      alert("it is working")
      e.preventDefault()
    }
  }

})