JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="app">
<form class="timeForm">
  <div class="form-group">
    <label for="startTime">Start Time</label>
    <input type="text" 
      class="form-control time" 
      id="startTime" 
      v-model="startTime"
      placeholder="hh:mm:ss"
      v-on:keyup="validateTime(startTime)" />
      </div>
  </form>
  {{errorMessage}}
</div>

CSS

form.timeForm {
  margin: 10px;
  padding: 20px;
  background-color: #eee;
  border-radius: 5px;
}

form.timeForm input.time {
  width: 95px;
}

form.timeForm input.valid {
  color: green;
}

form.timeForm input.invalid {
  color: red;
}

JavaScript

var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			startTime: '',
      errorMessage: ''
		}
	},
  mounted: function() {
  	this.validateTime(this.startTime);
  },
	methods: {
		validateTime: function(time) {
    	const regex = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/g;
      const m = regex.exec(time);
      let isValid = true;
      
      if(m == null) {
      	isValid = false;
      }
      
      if(time.length != 8) {
      	isValid = false;
      }
      
      if(isValid) {
      	this.errorMessage = 'valid';
      } else {
      	this.errorMessage = 'invalid';
      }
		}
	}
});