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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app">
  <form class="timeForm">
    <div class="form-group" v-bind:class="{'has-success': isValidTime(startTime), 'has-error': !isValidTime(startTime)}">
      <label for="startTime">Start Time</label>
      <div>
        <input type="text" 
          class="form-control time pull-left" 
          id="startTime" 
          v-model="startTime"
          placeholder="hh:mm:ss"
          />
          <i v-if="isValidTime(startTime)" class="fa fa-check pull-left timeCheck text-success" aria-hidden="true"></i>
          <div class="clear"></div>
      </div>
    </div>
    <div class="form-group" v-bind:class="{'has-success': isValidTime(endTime), 'has-error': !isValidTime(endTime)}">
      <label for="endTime">End Time</label>
      <div>      
      <input type="text" 
        class="form-control time pull-left" 
        id="endTime" 
        v-model="endTime"
        placeholder="hh:mm:ss"
        />
        
          <i v-if="isValidTime(endTime)" class="fa fa-check pull-left timeCheck text-success" aria-hidden="true"></i>
          <div class="clear"></div>
      </div>
    </div>
    
    <button type="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;
}

.clear {
  clear: both
}

form.timeForm i.timeCheck {
  font-size:20px;
  margin: 5px 0 0 5px;
}

JavaScript

var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			startTime: '',
			endTime: '',
      errorMessage: ''
		}
	},
	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;
		}
	}
});