JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<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-bind:class="{valid: isValidTime(startTime), invalid: !isValidTime(startTime)}"
        />
    </div>
    <div class="form-group">
      <label for="endTime">End Time</label>
      <input type="text" 
        class="form-control time" 
        id="endTime" 
        v-model="endTime"
        placeholder="hh:mm:ss"
        v-bind:class="{valid: isValidTime(endTime), invalid: !isValidTime(endTime)}"
        />
    </div>
    
    <button class="btn btn-primary" :disabled="!isValidTime(startTime) || !isValidTime(endTime)">
    Submit
    </button>
    
  </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: '',
			endTime: '',
      errorMessage: ''
		}
	},
  mounted: function() {
  	//this.validateTime(this.startTime);
  },
	methods: {
		isValidTime: 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;
      }
      
      return isValid;
		}
	}
});